0

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>
Austin Perez
  • 587
  • 7
  • 27
  • directives are complicated stuff but I would look at https://docs.angularjs.org/guide/animations – Jess Patton Jun 25 '15 at 15:48
  • ok, I will take a look. So there is no way to make the jquery I wrote work? Instead of trying to recode all of it to Angular? – Austin Perez Jun 25 '15 at 15:55
  • as far as i know the only way to get jquery animations to work in angular is to build them into a .animations directive (which does use jquery). Angular is its own framework and therefor does not always play nice with other frameworks. – Jess Patton Jun 25 '15 at 16:00
  • @JessPatton I was searching around and stumbled on this link http://plnkr.co/edit/C8OjSs0rplrghLn1KRmd?p=preview. it shows how after an animation is done how you can send a callback using "&". How could I do this but instead of sending an alert, have it switch to my next animation? – Austin Perez Jun 25 '15 at 16:12
  • Looks like you need a directive, see this answer http://stackoverflow.com/a/30173926/4084783 – Jess Patton Jun 25 '15 at 16:33

0 Answers0