Question

我只是想知道有更好的方法吗？我试图找到一种方法，我可以检查动画是否在元素上运行，如果它不关心导致动画的单击命令，所以没有重复的元素显示或重复动画。以下是它工作的代码我使用工厂存储动画变量，如果变量为true，则不会启动新动画。

的index.html

<!DOCTYPE html>
<html lang="en" ng-app="Animate">
<head>
    <meta charset="UTF-8" />
    <title>Js animation</title>
    <script src="lib/angular/angular.min.js"></script>
    <script src="lib/angular-animate/angular-animate.min.js"></script>
    <script src="lib/greensock/src/minified/TweenMax.min.js"></script>
    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap-theme.min.css" />
    <script src="js/jsanim.js"></script>
</head>
<body ng-controller="AppCtrl as app">
    <div class="container">
        <div class="row-fluid">
            <div class="jumbotron">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam natus ipsa libero nisi labore ad pariatur consequatur quasi sint modi porro saepe, cupiditate sed asperiores ullam laudantium sit dolorem. Animi.
                <div class="btn btn-warning" ng-click="app.toggleIt()">click to toggle</div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, dolore. Nam reiciendis consequuntur vero assumenda facere illum non modi vitae in et perferendis labore pariatur, sed, obcaecati nisi dignissimos quae?</div>
            <div class="col-md-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, dolore. Nam reiciendis consequuntur vero assumenda facere illum non modi vitae in et perferendis labore pariatur, sed, obcaecati nisi dignissimos quae?</div>
        </div>
        <div class="row-fluid">
            <div class="toggle" ng-if="app.toggle">
                toggle this
            </div>  
        </div>
    </div>
</body>
</html>

这是我的jsanim文件。

var app = angular.module("Animate", ['ngAnimate']);

app.factory("Settings", function(){

    var settings = {};
    settings.animating = false;
    return settings;

})

app.controller("AppCtrl", ["$animate", "$scope", "$http", "Settings", function AppCtrl($animate, $scope, $http, Settings){

    var appCtrl = this;

    appCtrl.toggle = true;

    appCtrl.toggleIt = function(){

        // console.log(Settings.animating, "Settings.animating");

        if(!Settings.animating){

            appCtrl.toggle = !appCtrl.toggle;
            console.log(appCtrl.toggle);

        }

    }

}])

app.animation(".toggle", function(Settings){

    return {

        leave:function(element, done){

            Settings.animating = true;
            TweenMax.to(element, 1, {opacity:0, onComplete:done});

            return function(onDone){

                Settings.animating = false;

            }

        },
        enter:function(element, done){

            Settings.animating = true;
            TweenMax.from(element, 1, {opacity:0, onComplete:done});

            return function(onDone){

                Settings.animating = false;

            }
        }

    }

})

Answer 1

GSAP有一个名为isActive()

的方法

http://greensock.com/docs/#/HTML5/GSAP/TweenLite/isActive/

您可以通过检查isActive（）

的条件来使用它

 if(!tween.isActive()){
        //only do something if the tween is not active
 }

GreenSock使用它的例子：

http://codepen.io/GreenSock/pen/Pwzomo

基本上isActive()表示动画当前是否处于活动状态（意味着虚拟播放头正在这个实例的时间范围内活动，并且没有暂停，也没有任何祖先时间轴）。

Answer 2

通过TweenMax可以通过多种方式实现这一目标。

isActive()（如前所述 @Jonathan Marzullo ） [Documentation]。
TweenMax.getTweensOf()和TweenMax.getAllTweens() [Documentation]。
TweenMax.isTweening() [Documention]。

所以从理论上讲，它可以像下面一样简单，而不必依赖外部布尔变量：

if (!TweenMax.isTweening(element)) TweenMax.to(element, duration,{prop:value});

希望它有所帮助。

角度js中的动画检查元素是否正在补间绿色

2 个答案: