Angular Animate: slide in div from right side - angularjs

Question

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;
}

Answer 1

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.