Question

我有一个精灵动画，在动画播放结束后切换到下一个精灵动画。

我最初使用Jquery进行了切换，但是现在我已经实现了Angular的路由，我的所有Jquery都停止了工作。

我查了一下，发现我的HTML中的脚本可能是错误的顺序，但是当我尝试将Jquery移到AngularJs脚本之上时，它没有解决问题。

我进一步调查了一下，发现我需要将我的Jquery改成AngularJS指令。我怎么做呢？

每个尝试解释完成方式的网站，只显示前后代码。这对我来说没什么意义。有人能告诉我这是怎么做的吗？

//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>

Angular - Jquery Sprite开关动画在使用ng-view时停止工作

0 个答案: