ng-classを使用してボタンをクリックしてアニメーションを再生成します。 Angular.js

Question

私は1回だけ動くアニメーションを持っています。ボタンをクリックしてアニメーションを繰り返すことをお勧めします。私は何が間違っているのか分からない。どうもありがとうございました。

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

var myApp = angular.module('myApp',[]); 
function MyCtrl($scope) { 
$scope.fn_transicion= function(sentido){ 
     $scope.transicion="next"; 
} 
} 
    #video{ 
    width: 98%; 
    height: 100%; 
    transition: all linear 0.5s; 
    background:blue; 
    -webkit-animation: next 1s 1; /* Safari 4+ */ 
    } 

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

私は使用NG-クラスが必要です。

http://jsfiddle.net/wmvfx5cd/

Answer 1

1クラスと例.run-animationにCSSを追加し、追加ボタン

$scope.fn_transicion= function(sentido){ 
    $scope.transicion="next"; 
     var el = document.getElementById('video'); 
    // -> removing the class 
    el.classList.remove("run-animation"); 
    void el.offsetWidth; 
    // -> and re-adding the class 
    el.classList.add("run-animation"); 
} 

Check the working Fiddle

更新回答のクリックでそれを削除します。ng-使用 クラス

HTML：

<div ng-controller="MyCtrl"> 
    <div class='contendor_portafolio' class='next'> 
    <video id='video' width="320" height="240" ng-class="{'run-animation': transicion === true}" controls> 
     <source src="video.mp4" type="video/mp4" /> 
    </video> 
    </div> 
    <button ng-click="fn_transicion()">again</button> 
</div> 

JS：

var myApp = angular.module('myApp',[]); 
myApp.controller("MyCtrl", ['$scope','$timeout', 
function($scope,$timeout) { 
$scope.transicion=true; 
    $scope.fn_transicion= function(sentido){ 
     $scope.transicion=false; 
     $timeout(function() { 
     $scope.transicion=true; 
     }, 100); 
    } 

}]); 

Updated Fiddle