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

Question

我正在我的 angular 应用程序中试用 Dan Eden 的 animation.css。

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

示例：

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': '=',
    },
  };
});

这里出现了我期望的向左反弹动画，但是我的元素然后 returns 回到了它的原始位置。

我试过 animation-fill-mode: forwards 但没有成功。我还尝试添加一个额外的 CSS class 因为 angular 在动画完成后删除 class ，所以我有 [=14= 而不是 .bounce-add.bounce-add-active ] 以及我的 html 中的 class="bounce"。

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

Here is the Plunker example.

Answer 1

将动画移动到您要添加的 class 并使用 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

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

Prevent element from returning to original position after keyframe animation

animation

addclass

css-animations

angularjs