Fatal编程技术网
  • javascript/
  • Javascript angular js中的动画检查元素是否正在变粗

Javascript angular js中的动画检查元素是否正在变粗

javascript angularjs animation

Javascript angular js中的动画检查元素是否正在变粗,javascript,angularjs,animation,gsap,Javascript,Angularjs,Animation,Gsap,我只是想知道有没有更好的方法？我试图找到一种方法，可以检查动画是否在元素上运行，如果它是导致动画的单击命令，那么就没有重复的元素显示或重复动画。这是它工作的代码，我使用工厂存储动画变量，如果变量为真，它将不会启动新动画 index.html <!DOCTYPE html> <html lang="en" ng-app="Animate"> <head> <meta charset="UTF-8" /> <title>Js

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

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>
GSAP有一个名为
isActive（）

您可以通过检查isActive（）的条件来使用它

GreenSock使用它的示例：

基本上，
isActive（）
指示动画当前是否处于活动状态（表示虚拟播放头正在该实例的时间跨度内活动，并且没有暂停，其任何祖先时间线也没有暂停）

您可以通过
TweenMax
实现这一点

  • isActive（）
    （如前所述，@Jonathan Marzullo） 
  • TweenMax.getTweensOf（）和
    TweenMax.getAllTweens（）
    

  • TweenMax.isTweening（）
因此，理论上，它可以简单到如下，而不必依赖外部布尔变量：

if (!TweenMax.isTweening(element)) TweenMax.to(element, duration,{prop:value});
希望有帮助。

可能会放弃该服务，并对TweenMax.isTweening（元素）进行检查；在你的。切换 
 if(!tween.isActive()){
        //only do something if the tween is not active
 }

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