CODEWITHSUNDEEP
angularjs
tommyd456
tommyd456

Reputation: 10673

How can I sequence animations

I've been trying to get a sequence of two animations running but I'm getting really annoyed as I just can't make it work! I need to fade a div in and then slide it to the right. Fade in is easy using:

.fadein.ng-hide-remove {
    animation: 0.8s appear;
    display: block!important;
}

.fadein.ng-hide-remove.ng-hide-remove-active {
    opacity:1;
}

@keyframes appear {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

and 

<div id="settings" ng-show="settingsPanel" class="fadein"></div>

and

$scope.showSettings = function(){
    $scope.settingsPanel = true;
}

Settings looks like this:

#settings {
    background:#353734;
    position:fixed;
    top:0;
    bottom:0;
    left:-280px;
    width:500px;
    z-index:100;
}

I've completed sliding too in a similar way but to get them to trigger one after the other is proving impossible for me. Could someone show me how to do this please?

Upvotes: 2

Views: 55

Answers (2)

Tom Makin
Tom Makin

Reputation: 3303

How about using keyframes as follows:

#settings {
    background:#353734;
    position:fixed;
    top:25px;
    bottom:0;
    left:0px;
    width:200px;
    z-index:100;
}

.fadein.ng-hide-remove {
    animation: 2.8s appear;
    display: block!important;
}

@keyframes appear {
  0% {
    left: -100px;
    opacity: 0;
  }
  50% {
    left: -100px;
    opacity: 1;
  }
  100% {
    left: 0;
    opacity: 1;
  }
}

See working fiddle here: http://jsfiddle.net/HB7LU/20650/

Upvotes: 1

Lee.Winter
Lee.Winter

Reputation: 710

Why not set keyframes up for animations and simply set different stages for each animation. Bit like this

@keyframes slide-right {
  0% {
    left: -450px;
  }
  100% {
    left: 0;
  }
}

Upvotes: 1

Related Questions