Question

我在我的角度应用程序中尝试了Dan Eden的animation.css。

我有一个自定义指令，它使用angular的$ animate服务将CSS类添加到我的元素中。

示例：

CSS

.bounce-add.bounce-add-active {
    -webkit-animation: bounceOutLeft 2.5s;
    animation: bounceOutLeft 2.5s;
}

HTML：

  <div my-directive="action"/>

JS

myMod.directive("myDirective", function ($animate) {

var linker = function (scope, element, attrs) {

    scope.$watch('myDirective', function (value, oldValue) {
            // if( value == doBounce ) 
            $animate.addClass(element, 'bounce').then(function () {
      });
}

return {
    link: linker,
    scope: {
        'myDirective': '=',
    },
  };
});

此处弹出左侧动画会在我预期的时候出现，但是我的元素会返回到它的原始位置。

我尝试了动画填充模式：前进没有运气。我还尝试添加一个额外的CSS类，因为角度在动画结束后删除了类，因此我的html中.bounce-add.bounce-add-active代替.bounce.bounce-add.bounce-add-active而不是class="bounce"。

有没有办法在使用包含关键帧动画的CSS样式后使用$ animate服务的addClass将元素保持在最终位置？

Here is the Plunker example.

Answer 1

将动画移动到要添加的班级并使用animation-fill-mode: forwards;：

.bounce {
  -webkit-animation: bounceOutRight 2.5s;
  -moz-webkit-animation: bounceOutRight 2.5s;
  animation: bounceOutRight 2.5s;

  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

演示： http://plnkr.co/edit/j8MtQvvF7cBtTLwE2sFc?p=preview

在关键帧动画后防止元素返回到原始位置

1 个答案: