在一个动画和另一个动画之间切换。 Angular.js

Question

我有 2 个动画，分别称为“上一个”和“下一个”。单击上一个按钮时，应执行“上一个”动画，单击“下一个”按钮时应执行“下一个”动画。我正在使用 ng-class 尝试记录它。我该怎么做？

    <div ng-controller="MyCtrl">
      <div class='contendor_portafolio' class='next'>
        <video  id='video' width="320" height="240" ng-class='transition' controls>
            <source src="video.mp4" type="video/mp4" />
        </video>
      </div>
      <button ng-click="fn_transicion('next')">next</button>
      <button ng-click="fn_transicion('prev')">prev</button>

    </div>

  var myApp = angular.module('myApp',[]);

  function MyCtrl($scope) {
    $scope.fn_transicion= function(transition){

        if(transition=='prev'){
           $scope.transition="prev";
        }
        if(transition=='next'){
           $scope.transition="next";
        }
    }
  }

  #video{
     width: 98%;
     height: 100%;
     transition: all linear 0.5s;
     background:blue;
     -webkit-animation: next 1s 1; /* Safari 4+ */
  }

  @-webkit-keyframes prev {
     25% { 
        -webkit-transform: translateX(-1700px);
     }
     50% { 
        opacity: 0;
        -webkit-transform: translateY(2000px);
        display: none;
     }
     60% { 
        -webkit-transform: translateX(1700px);
     }
     100%{
     } 
  }


  @-webkit-keyframes next {
     25% { 
        -webkit-transform: translateX(1700px);
     }
     50% { 
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        display: none;
     }
     60% { 
        -webkit-transform: translateX(-1700px);
     }
     100%{
     } 
  }

http://jsfiddle.net/752ffz1u/

Answer 1

您的答案非常接近解决方案。 AngularJs 部分工作正常，但问题是您定义了动画关键帧，但没有将它们附加到相应的类（通过转换变量和 ng-class 切换）。

将这些行添加到您的 css 代码将解决问题：

 #video.next {
   -webkit-animation: next 1s 1; /* Safari 4+ */
 }

 #video.prev {
   -webkit-animation: prev 1s 1; /* Safari 4+ */
 }

另外，你可以删除

-webkit-animation: next 1s 1; /* Safari 4+ */

来自 #video { } 块。