javascript - 通过使用ng-class单击按钮再次生成动画。 Angular.js

我有一个动画只能运行一次。我想单击按钮以重复动画。我不知道我在做什么错。非常感谢你。

<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-class。

http://jsfiddle.net/wmvfx5cd/

最佳答案

将CSS添加到一个类和示例.run-animation中，单击按钮添加并删除

$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-class

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

关于javascript - 通过使用ng-class单击按钮再次生成动画。 Angular.js，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43510776/