Angular JS在页面加载时延迟动画

Question

我正在尝试为我的应用主屏幕上的徽标设置动画，因此 2 秒后徽标淡入并在淡入淡出完成后开始循环动画以上下摆动。

我想过像这样在控制器中添加超时：

$timeout(function(){
    $scope.animationClass = 'animateOn';
});

然后在类添加到dom时触发动画。

但是我认为最好将此动画延迟代码放在指令中，因为它将分离代码并使其可重用。

我只是想知道是否有更简单的方法可以做到这一点，因为我是使用 Angular JS 制作动画的新手。

编辑：

我已经制定了一个指令，在延迟后添加一个类。这很好用，但有没有更简单的选择？见下文：

.directive('animationDelay', function($animate,$timeout) {
    return function(scope, elem, attr) {
        $timeout(function() {
            $animate.addClass(elem, 'my-animate');
        }, attr.animationDelay);
    };
});

通过使用调用：

<img animation-delay="3000" id="mainLogo" src="img/logo.svg" class="homeLogo" />

谢谢

Answer 1

CSS3 语法提供了一个属性来延迟动画，animation-delay

您可以将延迟设置为所需的量，在类中声明样式，并将类分配给元素。您可以使用相同的 'my-animate' 类并在其中包含动画延迟 More info

如果你想用 ng-show 显示元素出现在屏幕上后的效果，angular 有一个动画库，可以派上用场，ngAnimate