How to put Transition in Form Option

Asked

Viewed 217 times

3

I’m having a little trouble applying an effect on an Option, I have a form where you have Name, Email, Phone, Themes.

In where is Themes he has a Children’s Decorations option, when selecting Children’s Decorations he appears another Option below and I would like to apply an effect for when it comes up, like a fadein.

If necessary I can put the Code of my Form so you can see how it is.

Edit:

The Code is a little big:

HTML

          <form action="envia.php" method="post" id="form1">
            <input type="text" name="nome" id="nome" class="name" value="Nome" onFocus="if(this.value =='Nome' ) this.value=''" onBlur="if(this.value=='') this.value='Nome'">
            <input type="text" name="email" id="email" class="email" value="Email" onFocus="if(this.value =='Email' ) this.value=''" onBlur="if(this.value=='') this.value='Email'">
            <input type="text" name="ddd" id="ddd" class="ddd" value="DDD" onFocus="if(this.value =='DDD' ) this.value=''" onBlur="if(this.value=='') this.value='DDD'" maxlength="3">
            <input type="text" name="telefone" id="telefone" class="telefone" value="Telefone" onFocus="if(this.value =='Telefone' ) this.value=''" onBlur="if(this.value=='') this.value='Telefone'" maxlength="9">
            <p></p>
            <p><strong>Escolha a Data do Evento:</strong></p>
            <select name="dia" id="dia" class="dia">
              <option selected value="Dia">Dia</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
              <option value="13">13</option>
              <option value="14">14</option>
              <option value="15">15</option>
              <option value="16">16</option>
              <option value="17">17</option>
              <option value="18">18</option>
              <option value="19">19</option>
              <option value="20">20</option>
              <option value="21">21</option>
              <option value="22">22</option>
              <option value="23">23</option>
              <option value="24">24</option>
              <option value="25">25</option>
              <option value="26">26</option>
              <option value="27">27</option>
              <option value="28">28</option>
              <option value="29">29</option>
              <option value="30">30</option>
              <option value="31">31</option>
            </select>
            <select name="mes" id="mes" class="mes">
              <option selected value="Mês">Mês</option>
              <option value="1">Janeiro</option>
              <option value="2">Fevereiro</option>
              <option value="3">Março</option>
              <option value="4">Abril</option>
              <option value="5">Maio</option>
              <option value="6">Junho</option>
              <option value="7">Julho</option>
              <option value="8">Agosto</option>
              <option value="9">Setembro</option>
              <option value="10">Outubro</option>
              <option value="11">Novembro</option>
              <option value="12">Dezembro</option>
            </select>
            <select name="ano" id="ano" class="ano">
              <option selected value="Ano">Ano</option>
              <option value="2015">2015</option>
              <option value="2016">2016</option>
              <option value="2017">2017</option>
              <option value="2018">2018</option>
              <option value="2019">2019</option>
              <option value="2020">2020</option>
            </select>
            <p></p>
            <p><strong>Escolha um Tema:</strong></p>
            <select name="temas" id="temas" class="temas">
              <option selected value="Temas Disponíveis">Temas Disponíveis</option>
              <option data-section="infantil" value="Decoração Festa Infantil">Decoração Festa Infantil</option>
              <option value="Decoração Festa 15 Anos">Decoração Festa 15 Anos</option>
              <option value="Decoração Para Noivado">Decoração Para Noivado</option>
              <option data-section="casamento" value="Decoração Para Casamento">Decoração Para Casamento</option>
              <option value="Decoração Para Bodas">Decoração Para Bodas</option>
              <option data-section="chabebe" value="Decoração Para Chá de Bebê">Decoração Para Chá de Bebê</option>
              <option value="Decoração Para Chá de Cozinha">Decoração Para Chá de Cozinha</option>
              <option value="Decoração Para Chá de Lingerie">Decoração Para Chá de Lingerie</option>
              <option value="Decoração Para Formatura">Decoração Para Formatura</option>
              <option value="Decoração Para Eventos">Decoração Para Eventos</option>
            </select>
            <p></p>
            <div data-name="infantil" class="hide">
              <select name="infantil" id="infantil" class="infantil">
                <option value="Decoração Minnie Vermelha">Decoração Minnie Vermelha</option>
                <option value="Decoração Minnie Rosa">Decoração Minnie Rosa</option>
                <option value="Decoração Frozen">Decoração Frozen</option>
              </select>
            </div>
            <p></p>
            <div data-name="casamento" class="hide">
              <select name="casamento" id="casamento" class="casamento">
                <option value="Decoração Mesa Provençal de Casamento">Decoração Minnie Vermelha</option>
                <option value="Decoração Corredor de Cerimônia">Decoração Corredor de Cerimônia</option>
                <option value="Decoração Mesa Provençal e Corredor de Cerimônia">Decoração Mesa Provençal e Corredor de Cerimônia</option>
              </select>
            </div>
            <p></p>
            <div data-name="chabebe" class="hide">
              <select name="chabebe" id="chabebe" class="chabebe">
                <option value="Decoração Chá de Bebê Menina">Decoração Chá de Bebê Menina</option>
                <option value="Decoração Chá de Bebê Menino">Decoração Chá de Bebê Menino</option>
                <option value="Decoração Chá de Bebê Revelação">Decoração Chá de Bebê Revelação</option>
              </select>
            </div>
            <p></p>
            <label class="message"><textarea name="mensagem" id="mensagem" onFocus="if(this.value =='Mensagem' ) this.value=''" onBlur="if(this.value=='') this.value='Mensagem'">Mensagem</textarea></label>
              <div class="clear"></div>
              <div class="btns">
              <input type="submit" value="ENVIAR" class="btn" onclick="return validaform(form1)" />
                <div class="clear"></div>
              </div>
            </form>

JS

<script type="text/javascript">
    var selectTemas = document.getElementById('temas');
    var hidden = ['infantil', 'casamento', 'chabebe'].map(function(dataName){
        return document.querySelector('div[data-name="'+dataName+'"]')
    });

    selectTemas.addEventListener('change', function () {
        var selected = this.options[this.selectedIndex].dataset.section;
        hidden.forEach(function(select){
            select.classList[selected == select.dataset.name ? 'add' : 'remove']('active');
        });
    });
</script>

As you can see I have 3 Div with Hide class, they work with JS that when selecting the respective Options they appear.

And it is when they appear that I want to apply this effect as I said above.

html css css3 form

  • It is necessary to put the code of your form for us to see how it is

1 answer

2

Follows a solution using CSS. Added the effect of fadein in class .add if fadeout is needed just do the reverse process. Follows jsfiddle, remembering that due to some problems with your Javascript I altered it so that I could test the idea more is the same:

CSS Used:

.add {
    /*Abaixo você pode setar o tempo do fadein, lembrando de setar em todos para funcionar crossbrowser*/
    animation: fadein 2s;
    -moz-animation: fadein 2s;
    /* Firefox */
    -webkit-animation: fadein 2s;
    /* Safari and Chrome */
    -o-animation: fadein 2s;
    /* Opera */
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein {
    /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein {
    /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein {
    /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

Javascript used for testing:

var selectTemas = document.getElementById('temas');

selectTemas.addEventListener('change', function () {
    //pega dataset da opção selecionada
    var selected = this.options[this.selectedIndex].dataset.section;
    //seto a class .hide para todos as divs
    document.querySelector('div[data-name]').className = 'hide';
    //adiciono a class .add para o seletor correspondente ao selecionado no combobox
    document.querySelector('div[data-name="' + selected + '"]').className = 'add';
});
  • 1

    Brother, it was great, it worked, but I tried to do the reverse and I couldn’t, could you give me a little help ?

  • As soon as I get home I’ll update it for you..

  • Fala @Rodrigomaced excuse the delay, really the fadeout is not right in the reverse operation because the display: None; does not work together with the transaction :( I had to implement it a little differently.. its implementation is in the class . remove this jsfiddle http://jsfiddle.net/buh159/yprrsa8k/3/ I’ve made some fixes to my js because I found a rs buglets has another way to implement fade out using tmb javascript but I think this way will get lighter to your site :DD await a return for me to update the post :D hug..

Browser other questions tagged html css css3 form

You are not signed in. Login or sign up in order to post.