CODEWITHSUNDEEP
cssangularjsanimationng-animate
Daniel Mason
Daniel Mason

Reputation: 280

Angular ngShow sidebar sliding animation issue

I'm trying to animate a toggle-able sidebar so that it slides open and closed, and I can't seem to get the animations to work whatever I do. I think I'm getting confused with how I'm supposed to apply animations to ngShow/ngHide elements.

I've included an example here: https://jsfiddle.net/chiggerchug/m6ahk463/62/

EDIT: Link updated, menu now pauses before closing, but no animation is applied.

Here's an example of my css which is applied to the element that is being toggled:

  .animate-show-hide.ng-hide {
    -moz-transition: left 0.5s ease;
    transition: left 0.5s ease;
  }

  .animate-show-hide.ng-hide-remove {
    -moz-transition: left 0.5s ease;
    transition: left 0.5s ease;
  }

Any help on this issue would be greatly appreciated, Thanks.

Upvotes: 0

Views: 2179

Answers (1)

Vivz
Vivz

Reputation: 6620

The above code of yours is working. You just have to change your animation class

@keyframes myChange {
    from {
        width: 250px;
    } to {
        width: 0;
    }
}

.animate-show-hide.ng-hide {
  animation: 0.5s myChange;
}

Fiddle:https://jsfiddle.net/m6ahk463/64/

Updated Fiddle: https://jsfiddle.net/m6ahk463/66/

Upvotes: 1

Related Questions