1つのアニメーションと別のアニメーションを切り替えます。 Angular.js

Question

私は、 "prev"と "next"という2つのアニメーションを持っています。 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クラスを使用して切り替えられます）にアタッチしないことです。

は、問題を解決しますあなたの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+ */ 

を削除することができます。