Slide down / up animation pure css on angularjs

Posted: September 28, 2015 in web
.results-animation{
    max-height: 0;
    overflow-y: hidden;
/*    transition-property: all;*/
    transition-duration: .9s;
/*    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);*/
    height: 500px;
}
.results-animation.open {
    max-height: 500px;
}

constroller

...
vm.showResults = false;
...
$timeout(function(){
                                    vm.showResults = true;
                                },1000);

template

<div ng-class="{'open' : vm.showResults}" class="results-animation">
...
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s