Javascript 使用ng类通过单击按钮再次生成动画。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>

我需要使用ng类

---

将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");
}

更新答案： 使用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>

 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);
    }

}]);

---

或多或少是我想要的，但我需要使用if或if，ng类。这是我在实际项目中遇到的一个小问题，并非如我所愿。我需要使用ng类来完成此操作。

 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);
    }

}]);