Question

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

我知道您将切换类以切换精灵动画，但是如何让Angular监听第一个精灵动画的最后一个关键帧？

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方式，只需在控制器外包含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; }
}

AngularJS - 完成后更改精灵动画

1 个答案: