Angular animate help - slide and then hide - css

Question

i am trying to achieve a pretty simple effect ( I thought ). When a user clicks on a button, I need to slide in a div from the right side of a 'viewport' onto the viewable page.
at the moment I have the 'slide' div's css to look like this:
.slider {
postion: absolute;
right: -200;
display: none
}
Once a user clicks on a button, the div needs to show, and then move to the left, i.e.
transform: translate(-200px, 0);
At the end of the animation the end state of that div would need to be something like this
.slider.after-animate {
postion: absolute;
right: 0;
display: block;
}
then when the user 'closes' the div, I want to slide it back to right: -200px and then after the animation is done, I want to put a display:none on that div.
I have looked an several ngAnimate tutorials but nothing I could find deals with the 'before/after' animate scenario where I need to show\hide the div before/after it gets animated.
can anyone point me to the right direction ????
Thanks!

Answer 1

You could try css keyframes so that we have more than 2 states. In this example, there are 3 states for each animation.
.slider
{
position:absolute;
right:0px;
width:200px;
height:200px;
border:1px solid red;
background-color:red;
}
//angular animate automatically adds ng-hide-add when starting to add ng-hide class
.slider.ng-hide-add{
-webkit-animation: remove_sequence 2s linear ;
animation:remove_sequence 2s linear;
display:block!important;
}
//angular animate automatically adds ng-hide-add when starting to remove ng-hide class
.slider.ng-hide-remove{
-webkit-animation: enter_sequence 2s linear ;
animation:enter_sequence 2s linear;
display:block!important;
}
#-webkit-keyframes enter_sequence {
0% { display:block;
right:-200px;
}
10% { right:-200px; }
100% {right:0px;}
}
#keyframes enter_sequence {
0% { display:block;
right:-200px;
}
10% { right:-200px; }
100% {right:0px;}
}
#-webkit-keyframes remove_sequence {
0% { right:0px; }
90% { right:-200px; }
100% {
right:-200px;
display:none;
}
}
#keyframes remove_sequence {
0% { right:0px; }
90% { right:-200px; }
100% {
right:-200px;
display:none;
}
}
DEMO