I have two animations named "prev" and "next". Upon clicking the prev button, the "prev" animation should play. Similarly, when you click on the "next" button, the "next" animation should be triggered. I am using ng-class to achieve this behavior. How can I make it work?
<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%{
}
}