在一個動畫和另一個動畫之間切換。 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+ */ 

。