Slide up down effect with ng-show and ng-animate

Question

I m trying to use ng-animate to get a behavior similar to JQuery s slideUp   and slideDown    Only I d rather use ng-show  I m looking at the ng-animate tutorial here - http   www yearofmoo com 2013 04 animation-in-angularjs html   and I can reproduce the fade in out effect in the example provided   How could I change the css to get slide up down behaviour  Also  if possible  it s better that the css doesn t know about the component height in pixels  That way I can reuse the css for different elements

User · Answer

This is actually pretty easy to do  All you have to do is change the css   Here s a fiddle with a very simple fade animation  http   jsfiddle net elthrasher sNpjH   To make it into a sliding animation  I first had to put my element in a box  that s the slide-container   then I added another element to replace the one that was leaving  just because I thought it would look nice  Take it out and the example will still work   I changed the animation css from  fade  to  slide  but please note that these are the names I gave it  I could have written slide animation css named  fade  or anything else for that matter   The important part is what s in the css  Here s the original  fade  css    fade-hide   fade-show       -webkit-transition all cubic-bezier 0 250  0 460  0 450  0 940  0 5s      -moz-transition all cubic-bezier 0 250  0 460  0 450  0 940  0 5s      -o-transition all cubic-bezier 0 250  0 460  0 450  0 940  0 5s      transition all cubic-bezier 0 250  0 460  0 450  0 940  0 5s     fade-hide       opacity 1     fade-hide fade-hide-active       opacity 0     fade-show       opacity 0     fade-show fade-show-active       opacity 1      This code changes the opacity of the element from 0  completely transparent  to 1  completely opaque  and back again  The solution is to leave opacity alone and instead change the top  or left  if you want to move left-right     slide-hide   slide-show       -webkit-transition all cubic-bezier 0 250  0 460  0 450  0 940  1 5s      -moz-transition all cubic-bezier 0 250  0 460  0 450  0 940  1 5s      -o-transition all cubic-bezier 0 250  0 460  0 450  0 940  1 5s      transition all cubic-bezier 0 250  0 460  0 450  0 940  1 5s     slide-hide       position  relative      top  0     slide-hide slide-hide-active       position  absolute      top  -100px     slide-show       position  absolute      top  100px     slide-show slide-show-active       position  relative      top  0px      I m also changing from relative to absolute positioning so only one of the elements takes up space in the container at a time   Here s the finished product  http   jsfiddle net elthrasher Uz2Dk   Hope this helps

User · Answer

I ended up abandoning the code for my other answer to this question and going with this answer instead   I believe the best way to do this is to not use ng-show and ng-animate at all      Executes jQuery slideDown and slideUp based on value of toggle-slidedown     attribute   Set duration using slidedown-duration attribute   Add the     toggle-required attribute to all contained form controls which are    input  select  or textarea   Defaults to hidden  up  if not specified    in slidedown-init attribute      fboApp directive  toggleSlidedown   function        return           restrict   A           link  function  scope  elem  attrs  ctrl                if   down     attrs slidedownInit                   elem css  display                      else                   elem css  display    none                              scope  watch attrs toggleSlidedown  function  val                    var duration     isUndefined attrs slidedownDuration    150   attrs slidedownDuration                  if  val                        elem slideDown duration                     else                       elem slideUp duration

User · Answer

I ve written an Angular directive that does slideToggle   without jQuery   https   github com EricWVGG AngularSlideables

User · Answer

This class-based javascript animation works in AngularJS 1 2  and 1 4 tested   Edit   I ended up abandoning this code and went a completely different direction  I like my other answer much better  This answer will give you some problems in certain situations   myApp animation   ng-show-toggle-slidedown   function      return       beforeAddClass   function element  className  done           if  className     ng-hide                  element  slideUp  duration  400   done             else  done                beforeRemoveClass    function element  className  done           if  className     ng-hide                  element  css  display  none                   element  slideDown  duration  400   done             else  done                    Simply add the  ng-hide-toggle-slidedown class to the container element  and the jQuery slide down behavior will be implemented based on the ng-hide class       You must include the   element  css  display  none    line in the beforeRemoveClass method because jQuery will not execute a slideDown unless the element is in a state of display  none prior to starting the jQuery animation   AngularJS uses the CSS             ng-hide not  ng-hide-animate        display  none  important      to hide the element   jQuery is not aware of this state  and jQuery will need the display none prior to the first slide down animation   The AngularJS animation will add the  ng-hide-animate and  ng-animate classes while the animation is occuring

User · Answer

What s wrong with actually using ng-animate for ng-show as you mentioned    lt script src  lib angulr js  gt  lt  script gt   lt script src  lib angulr animate js  gt  lt  script gt   lt script gt      var app angular module  ang app     ngAnimate         app controller  ang control01 main   function  scope              lt  script gt   lt style gt       myDiv           transition   5s          background-color  lightblue          height  100px             myDiv ng-hide           height  0         lt  style gt   lt body ng-app  ang app  ng-controller  ang control01 main  gt       lt input type  checkbox  ng-model  myCheck  gt       lt div id  myDiv  ng-show  myCheck  gt  lt  div gt   lt  body gt

User · Answer

update for Angular 1 2   v1 2 6 at the time of this post     stuff-to-show     position  relative    height  100px    -webkit-transition  top linear 1 5s    transition  top linear 1 5s    top  0     stuff-to-show ng-hide     top  -100px     stuff-to-show ng-hide-add   stuff-to-show ng-hide-remove     display  block important       plunker

User · Answer

You should use Javascript animations for this - it is not possible in pure CSS  because you can t know the height of any element  Follow the instructions it has for you about javascript animation implementation  and copy slideUp and slideDown from jQuery s source

User · Answer

This can actually be done in CSS and very minimal JS just by adding a CSS class  don t set styles directly in JS   with e g  a ng-clickevent  The principle is that one can t animate height  0  to height  auto  but this can be tricked by animating the max-height property  The container will expand to it s  auto-height  value when  foo-open is set - no need for fixed height or positioning    foo       max-height  0      foo--open       max-height  1000px     some arbitrary big value        transition          see this fiddle by the excellent Lea Verou  As a concern raised in the comments  note that while this animation works perfectly with linear easing  any exponential easing will produce a behaviour different from what could be expected - due to the fact that the animated property is max-height and not height itself  specifically  only the height fraction of the easing curve of max-height will be displayed

[css] Slide up/down effect with ng-show and ng-animate

Examples related to css

Examples related to angularjs