Question

我一直试图让一系列两个动画运行，但我真的很生气，因为我无法让它发挥作用！我需要淡入div，然后向右滑动。使用以下内容轻松淡入：

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

和

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

和

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

设置如下所示：

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

我已经以类似的方式完成了滑动，但让他们一个接一个地触发，这对我来说是不可能的。有人可以告诉我该怎么做吗？

Answer 1

为什么不为动画设置关键帧，只需为每个动画设置不同的阶段。有点像this

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

Answer 2

如何使用关键帧如下：

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

在这里看到工作小提琴： http://jsfiddle.net/HB7LU/20650/

我该如何对动画进行排序

2 个答案: