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


Tags: css,css3,angularjs

Problem :

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.



Solution :

I've written an Angular directive that does slideToggle() without jQuery.

https://github.com/EricWVGG/AngularSlideables


    CSS Howto..

    Showing the percentage of poll's progress bar outside progress bar

    How to slide an element without removing it from DOM ( A psudo slide maybe)?

    How to move img src a few pixels down in html page

    How does Bootstrap's Jumbotron example create space in navbar elements

    how to position icon just after h2 tag using :after pseudo even though 100% width

    How to achieve following style for horizontal rule with css

    How can I create custom scrollbar (jScrollPane) with knockout binding?

    How to apply inline and/or external CSS loaded dynamically with jQuery

    how to change collapse direction of a panel in bootstrap

    How to add style to words (HTML/CSS)

    How to attach stylesheet to HTML email?

    HTML - How do css/javascript files get loaded?

    How to make elements appear one by one using css animation

    How to edit css files using php safely?

    CSS - How to center a DIV menu

    How to use list tag in single line

    How do I fix a Wordpress meta box that's blown out by it's content?

    How do you add a css class (Bootstrap) to a select field with a loop inside in Rails?

    How to get the element background image in html using javascript

    css issue in IE7, not sure how to fix

    How to manage multiple css files in rails 4?

    How to position two divs horizontally within another div

    How can I override inline styles with external CSS?

    How to make the background of my text larger?

    RoR - howto convert some HTML-elements with css to Rails

    How can I use a link to navigate between input boxes?

    Can someone show me how to get my CSS code to work more than once? [closed]

    How to change text color of a css class?

    How to store “state” in CSS only?

    How to create a floating mutlicolumn layout in CSS (Flexbox, float, inline-block)?