Angular animate help - slide and then hide

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