I'm currently working on a feature where I need to toggle the visibility of an element when the user clicks on my unordered list.
Here's a snippet of what I have:
<ul ng-click="expandMenu =!expandMenu"> // Clicking on this ul will reveal the wrapper
</ul>
<div id='wrapper' ng-show='expandMenu' ng-animate="{show:'animate-show', hide:'animate-hide'}">
//contents
</div>
The element does show and hide as desired when clicking on my ul, however, I am looking to add a smooth animation effect to it.
Here is the CSS code I have tried to implement:
.animate-show, .animate-hide {
-webkit-transition:all linear 1s;
-moz-transition:all linear 1s;
-ms-transition:all linear 1s;
-o-transition:all linear 1s;
transition:all linear 1s;
}
.animate-show {
opacity:0;
}
.animate-show.animate-show-active {
opacity:1;
}
.animate-hide {
opacity:1;
}
I came across this solution while searching on Google, but unfortunately, I haven't been able to make it work in my scenario. Can anyone provide some assistance?
Thank you!