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

Question

我有2个叫做“prev”和“next”的动画。当你点击prev按钮时，应该执行“prev”动画，当你点击“next”按钮时，应该执行“next”动画。我正在使用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+ */ 
} 

此外，您还可以从请#video {}块删除

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

。