ng-class在设定时间后删除类

I'm trying to create a quick animation demo with a button that adds a class on a container to play animation using ng-click. What I want to do is to remove the applied class after a set period of time. Can you please tell me why the following code is not working :$ ?

我正在尝试创建一个带有按钮的快速动画演示，该按钮在容器上添加一个类以使用ng-click播放动画。我想要做的是在一段时间后删除应用的类。你能否告诉我为什么以下代码不起作用：$？

    <!doctype html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.js"></script>
    <script type="text/javascript" src="script/angular.js"></script>

    <style>
        .animation-container {
            display: block;
            height:500px;
            padding: 10px;
            background: black;
            text-align: center;     }
        .animation-trigger {
            display: block;
            padding: 5px;
            background: #111;
            text-align: center;
        }

        .box {
            display: inline-block;
            width: 150px;
            height: 150px;
            background: red;

            transition: all 1s ease;
        }

        .reload {
            width: 150px;
            height: 150px;
        }

        .play {
            width: 250px;
            height: 250px;
        }
    </style>

    <script>
        var myApp = angular.module("myApp", []);
        myApp.controller("animationController", function($scope){
            this.trigger = 0;

            this.reset = function() { 
                setTimeout(function() { 
                    return this.trigger === 0;
                    }, 2000
                );
            }
        });
    </script>

</head>
<body ng-app="myApp">
<div class="animation-wrapper" ng-controller="animationController as anim">
    <div class="animation-container">
        <div class="box" ng-class="{play : anim.trigger === 1, reload : anim.trigger === 0}"></div>
    </div>

    <div class="animation-trigger">
        <button ng-click="anim.trigger = 1; anim.reset()" >Play Animation</button>
    </div>
</div>

</body>
</html>

1 个解决方案

#1

Firstly you need to bind values to $scope:

首先，您需要将值绑定到$ scope：

$scope.trigger = 0;

You also need to use $timeout instead of setTimeout() so that bindings are updated:

您还需要使用$ timeout而不是setTimeout（）以便更新绑定：

$scope.reset = function() {
    $timeout(function(){
        $scope.trigger = 0;
    }, 2000);
};

Then you can set your button html like this for example:

然后你可以设置你的按钮html，例如：

<button ng-click="trigger = 1; reset()" >Play Animation</button>

#1