How to put Transition in Form Option

Navigation
3

I'm having a hard time applying an effect to an Option, I have a form where you have Name, Email, Phone, Themes.

In Where Themes is, it has a Child Decorations option, when selecting Child Decorations it appears another Option below and I would like to apply an effect to when it appears, type a fadeIn.

If necessary I can put the Code of my Form for you to see how you are.

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's when they appear that I want to apply this effect as I said above.

    
asked by anonymous 03.09.2015 / 22:34

1 answer

2

Follow a solution using CSS . In it, the effect of fadein on the class .add has been added if fadeout is needed, just do the inverse process. Here's jsfiddle , remembering that due to some issues with your JavaScript I changed so I could test the idea further 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 to test: 

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';
});
    
03.09.2015 / 23:35
Complex bank type extract MySql how to solve Problem with accent when generating PDF with dompdf