CODEWITHSUNDEEP
angularjs
ps0604
ps0604

Reputation: 1071

Angular Animate: slide in div from right side

In this plunk I am trying to have a div slide in from the right side, then slide back to hide. Clicking on the checkbox shows/hides the div.

I almost made this work, I cannot make the transition to slide, the div just shows up and hides without transitioning. Any ideas?

HTML:

Show <input type="checkbox" ng-model="checked">
<div class="panel" ng-show="checked" style="border:1px solid #dddddd;background:orange;width:200px">
    <input type="checkbox"> Charts
    <br/>
    <input type="checkbox"> Reports
    <br/>
    <input type="checkbox"> Files
    <br/>
</div>

CSS:

.panel{
  position: fixed;
  top: 10px;
  right: -2px;
}
.panel.ng-show-add {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
}
.panel.ng-show-add-active {
    display: block;
}

Upvotes: 2

Views: 7536

Answers (1)

tpie
tpie

Reputation: 6221

Firstly, to use ngShow animations, you need ngAnimate, so I added that.

I also updated the plunker to use a newer version of angular for the sake of ease and compatibility. If you are using an older version of angular, just use the appropriate version of ngAnimate.

You need this to make it apply the styles correctly (per the docs):

.panel.ng-hide-add, .panel.ng-hide-remove {
  /* this is required as of 1.3x to properly
     apply all styling in a show/hide animation */
  transition: 0s linear all;
}

Then you need to make sure you apply your transitions to the active add and active remove for hide:

.panel.ng-hide-add-active, .panel.ng-hide-remove-active {
/* -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
*/
transition: all ease-in-out 2s;
}

Note that I left your cubic-bezier transitions in there for reference, but have them commented out just to get things working.

I then added a hidden (start) position for it.

.panel.ng-hide {
  right: -200px;
}

So...not sure if this works for you, but you said you needed it to slide, so it does that. Not sure why you need the cubic-bezier transition for that, though I am not that familiar with it.

Animation Demo

As an aside, angular doesn't animate through an ng-show class, it does it through ng-hide, thus the ng-hide-remove/ng-hide-add and the -active versions of those classes. It may be confusing if you try to use those and wonder why things aren't working. It's because they don't get used.

Upvotes: 3

Related Questions