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语法提供延迟动画的属性，动画延迟

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

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

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

1 个答案: