CODEWITHSUNDEEP
htmlcssangularjsanimation
FlyingCat
FlyingCat

Reputation: 14290

How to animate my element in my case?

I want to create an animation using Angular js

I have something like

HTML

<ul ng-click="expandMenu =!expandMenu; mycss='expand'">
            <li id='unit-btn' ng-class='mycss'>

            </li>
            <li id='lesson-btn' ng-class='mycss'>

            </li>
            <li id='day-btn' class='tree-nav-btn'>

            </li>
  </ul>

CSS

.expand{
    -webkit-animation: openMenu 5s;
}

@-webkit-keyframes openMenu{
        from {width: 100px;}
        to   {width: 200px;}
}

I am able to expand the li to 200px but I need to collapse the menu back to 100px after the user clicks again. How do I accomplish it? Thanks for the help

Upvotes: 0

Views: 42

Answers (1)

gomflo
gomflo

Reputation: 171

Try with the classes angular uses for ng-show ng-hide directives

When the element is closing:

.my-element.ng-hide-add { ... }

When the elements is opening:

.my-element.ng-hide-remove { ... }

So it can turn into something like that:

.expand.ng-hide-remove {
  -webkit-animation: openMenu 5s;
}

.expand.ng-hide-add {
  -webkit-animation: closeMenu 5s;
}

@-webkit-keyframes openMenu{
    from {width: 100px;}
    to   {width: 200px;}
}

@-webkit-keyframes closeMenu{
    from {width: 200px;}
    to   {width: 100px;}
}

Hope it works.

Upvotes: 1

Related Questions