css - AngularJS - 完成后更改 Sprite 动画

Question

我正在为我的着陆页制作 sprite 动画。我有两个 Sprite 动画。第一个动画将开始并播放一次，另一个动画将在第一个动画结束后无限循环。

我知道你会切换类来切换 Sprite 动画，但我怎样才能让 Angular 监听第一个 Sprite 动画的最后一个关键帧？

var app = angular.module('app', ['ui.bootstrap']);

app.controller('animation-toggle', function($scope) {
  $scope.class_status = 0;

  
  //toggle class with boolean
  $scope.toggleSingleClass = function() {
    $scope.class_status = !$scope.class_status;
    };
  
  //remove class
  $scope.removeSingleClass = function() {
    $scope.class_status =0;
    };
  //add class
  $scope.addSingleClass = function() {
    $scope.class_status = 1;
    };
});

/* FIRST ANIMATION */
.land-animation {
    width: 700px;
    height: 493px;
    margin: 60px auto;
    background: url('../images/font-animation.jpg') left center;
    animation: play 4.0s steps(48);
}

@keyframes play {
    100% { background-position: -33600px; }
}

/* SECOND ANIMATION */
.land-animation2 {
    width: 700px;
    height: 493px;
    margin: 60px auto;
    background: url('../images/font-animation2.jpg') left center;
    animation: play 4.0s steps(48) infinite;
}

@keyframes play {
    100% { background-position: -33600px; }
}

<!-- RUNNING ANGULAR 1.3.15 -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>


<!-- DIV ANIMATION -->
<div ng-controller="animation-toggle" ng-class="{'land-animation2': class_status }" class="hero-unit land-animation"></div>

Answer 1

你可以尝试纯 jQuery 方式，只需在 Controller 外包含 jquery.min.js 和以下代码，

$(document).ready(function(){
    $(".hero-unit.land-animation").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ 
       $(this).removeClass("land-animation").addClass("land-animation2");
   });
});

更新

为了避免中间出现白框，请按以下方式更改代码，

$(document).ready(function(){
    $(".hero-unit.land-animation").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ 
       $(this).addClass("land-animation2");
   });
});

在 CSS 中，

/* FIRST ANIMATION */
.land-animation {
    width: 700px;
    height: 493px;
    margin: 60px auto;
    background: url('http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg') left center;
    animation: play 4.0s steps(48);
}

@keyframes play {
    100% { background-position: -33600px; }
}

/* SECOND ANIMATION */
.land-animation2 {
    background: url('http://cdn.phys.org/newman/gfx/news/hires/2013/spitzerandal.jpg') left center;
    animation: play2 4.0s steps(48) infinite;
}

@keyframes play2 {
    100% { background-position: -33600px; }
}