CODEWITHSUNDEEP
javascriptcssangularjs
FlyingCat
FlyingCat

Reputation: 14250

How to show and hide an element in my case?

I am trying to show and hide an element when user clicks my ul element

I have something like

<ul ng-click="expandMenu =!expandMenu"> //when clicks ul, the wrapper shows

</ul>

 <div id='wrapper' ng-show='expandMenu' ng-animate="{show:'animate-show', hide:'animate-hide'}">
   //contents
 </div>

The element shows and hides as expected when I click my ul but I want to have smooth animation.

my css

.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 found the above answer from Google but I can't seem to get it worked in my case. Can anyone help me out?

Thanks

Upvotes: 1

Views: 62

Answers (1)

Dayan Moreno Leon
Dayan Moreno Leon

Reputation: 5435

you don'y actually need all the ng-animate stuff all you need is

.wrapper.ng-hide-add{
    display:block !important;
    opacity:1;
}

.wrapper.ng-hide-remove{
    display:block !important;
    opacity:0;
}

Upvotes: 1

Related Questions