Question

我有2个名为“prev”和“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-class切换）。

将这些行添加到您的css代码中将解决问题：

 #video.next {
   -webkit-animation: next 1s 1; /* Safari 4+ */
 }

 #video.prev {
   -webkit-animation: prev 1s 1; /* Safari 4+ */
 }

此外，您可以删除

-webkit-animation: next 1s 1; /* Safari 4+ */

来自 #video {} 块。

在一个动画和另一个动画之间切换。 Angular.js

1 个答案: