Angular JS animating on page load with delay

Question

I'm trying to animate the logo on my app home screen so after 2 seconds the logo fades in and begins a looped animation after the fade is complete to bob up and down.

I've thought of adding a timeout in the controller like this:

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

And then trigger the animation when the class is added to the dom.

However I think it may be best to put this animation delay code in a directive as it will separate the code and make it reusable.

I just wondered if there's an easier way of doing this as I'm new to animating with Angular JS.

EDIT:

I've made a directive to add a class after a delay. This works great, but is there an easier alternative? See below:

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

Called by using:

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

Thanks

A. Romeu · Accepted Answer · 2016-03-04 12:37:32Z

1

CSS3 syntax provides a property to delay an animation, animation-delay

You can set the delay to the amount you want, declare the style in a class, and assign the class to the element. You can use the same 'my-animate' class and include the animation delay there More info

If you want to display the effect after an element appears on screen with ng-show, angular has a library for animations that will come handy, ngAnimate

answered Mar 4, 2016 at 12:37

A. Romeu

3021 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JamesG Over a year ago

I did try using the animation-delay CSS property, but this did not work for custom transitions. The element was showing on screen before the animation happened. You can't manually add a delay to the ng-show either to hook into ngAnimate so that's why I thought of using the directive

Collectives™ on Stack Overflow

Angular JS animating on page load with delay

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related