I have a sprite animation that switches to the next sprite animation after the animation has finished playing.
I made the switch initially using Jquery, but now that I have been implementing Angular's Routing all of my Jquery has stopped working.
I looked it up and found that it might be the wrong order of scripts in my HTML, but when I tried moving Jquery above the AngularJs Script it did not solve the issue.
I looked into it further and found that I will need to change my Jquery into an AngularJS Directive. How do I even go about doing that??
Every site that has tried explaining how it is done, just shows the before and after code. It does not make much sense to me. Can someone show me how this would be done?
//This is my original Jquery code that I was using. That I want to make work using the Directive
// $(document).ready(function(){
// $(".hero-unit.land-animation").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
// $(this).addClass("land-animation2");
// });
// });
// This is what I attempted at trying to do in Angular.
var app = angular.module('app', ['ui.boostrap', 'ngRoute']);
app.directive('directiveName', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
$(element).
'pluginActivationFunction' (scope.$eval(attrs.directiveName));
}
};
});/* SCSS */
@mixin animation($str) {
-webkit-animation: #{$str};
-moz-animation: #{$str};
/* -ms- prefix removed! */
-o-animation: #{$str};
animation: #{$str};
}
.land-animation {
width: 700px;
height: 493px;
background: url('../images/front-animation.jpg') left center;
animation-delay: 0.1s;
z-index: 10;
@include animation(play 4.0s steps(48));
}
@include keyframes(play) {
100% { background-position: -33600px; }
}
.land-animation2 {
width: 700px;
height: 493px;
background: url('../images/front-animation2.jpg') left center;
@include animation(play2 4.0s steps(48) infinite);
z-index: 10;
}
@include keyframes(play2) {
100% { background-position: -33600px; }
}
.hero-unit {
margin: 70px auto;
display: inline-block;
position: relative;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-route.js"></script>
<!--ANIMATION -->
<div class="col-sm-12 col-md-4 col-lg-7">
<div class="directiveName hero-unit land-animation hidden-md hidden-sm hidden-xs"></div>
</div>