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

Question

I have 2 animations called "prev" and "next". When you click on the prev button, the "prev" animation should be executed, when you click on the "next" button the "next" animation should be executed. I'm using ng-class to try to log it. How can I do it?

    <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

Your answer is pretty close to the solution. The AngularJs part's working fine but the problem is you defined the animation keyframes, but not attached them to the corresponding classes (that are toggled via transition variable and ng-class).

Add these lines to your css code will solve the problem:

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

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

Also, you can remove

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

from the #video { } block.