Usando transições CSS para SlideUp e slideDown

0

Olá pessoal! Hoje vou falar sobre como realizar um simples efeito de SlideUp e SlideDown ( lembra bem o accordion do Jquery UI ), mas de maneira simples onde você mesmo poderá alterar e trabalhar seus componentes sem a dependencia do Jquery UI ou de componentes que realizam isto.

JavaScript-logo

Iremos utilizar apenas a nova biblioteca do Jquery que pode ser baixada aqui . Vamos utilizar inicialmente nossa estrutura com o css :

 <style>
        #Slider {
            
        }
        #Atual {
            background: silver;
            color: White;
            padding: 20px;
        }
        .slideup, .slidedown {
            max-height: 0;            
            overflow-y: hidden;
            -webkit-transition: max-height 0.8s ease-in-out;
            -moz-transition: max-height 0.8s ease-in-out;
            -o-transition: max-height 0.8s ease-in-out;
            transition: max-height 0.8s ease-in-out;
        }
        .slidedown {            
            max-height: 60px ;                    
        }    
    </style>

Veja nosso Html :

  
  <div class="container" style="padding: 40px">
      <button id="Trigger">Acionar Slideup/SlideDown</button>
      <div id="Slider" class="slideup">
          <div id="Atual">
                Olá Mundo - Código Simples
            </div>
      </div>
    </div>
    

E pra finalizar vamos utilizar a nossa função JavaScript :

  
<script data-require="[email protected]" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script>
        
        $("#Trigger").click(function () {
          //$("#Slider").toggleClass("slidedown slideup");
            if ($("#Slider").hasClass("slideup"))
              $("#Slider").removeClass("slideup").addClass("slidedown");
            else
                $("#Slider").removeClass("slidedown").addClass("slideup");
        });
    </script>
    
    

Com isto vamos conseguir basicamente este efeito transformando este código em um arquivo html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    
    <style>
        #Slider {
            
        }
        #Atual {
            background: silver;
            color: White;
            padding: 20px;
        }
        .slideup, .slidedown {
            max-height: 0;            
            overflow-y: hidden;
            -webkit-transition: max-height 0.8s ease-in-out;
            -moz-transition: max-height 0.8s ease-in-out;
            -o-transition: max-height 0.8s ease-in-out;
            transition: max-height 0.8s ease-in-out;
        }
        .slidedown {            
            max-height: 60px ;                    
        }    
    </style>
  </head>

  <body>
    <div class="container" style="padding: 40px">
      <button id="Trigger">Acionar Slideup/SlideDown</button>
      <div id="Slider" class="slideup">
      
        <div id="Atual">
                Olá mundo - Código Simples
            </div>
      </div>
    </div>


    <script data-require="[email protected]" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script>
        
        $("#Trigger").click(function () {
          //$("#Slider").toggleClass("slidedown slideup");
            if ($("#Slider").hasClass("slideup"))
              $("#Slider").removeClass("slideup").addClass("slidedown");
            else
                $("#Slider").removeClass("slidedown").addClass("slideup");
        });
    </script>
  </body>
</html>
Pronto! Assim você poderá criar outros efeitos de acordo com sua necessidade!

Obs: Deixei comentado via javascript uma função que também realiza o mesmo processo de slide porém de maneira simplificada e direta.

Por hoje é só. Mais um tutorial utilizando Código Simples! 😉

Compartilhe.