Question

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

<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/

Answer 1

将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

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

1 个答案: