Just dipping my toes into Angular, so feel free to correct me if I'm way off base here.
I've been working on animating the clamps on both sides of my website to slide in upon the initial page load. You can check out the live version at:
Currently, it's functioning as intended (hooray). However, I'm not entirely satisfied with the method I've employed. Here's the relevant code:
Within my controller, I've set up an event listener for $routeChangeStart, and upon the first instance, I execute:
setTimeout(function() {
angular.element(document.querySelector('.robotarmleft')).addClass('animate-in');
angular.element(document.querySelector('.robotarmright')).addClass('animate-in');
}, 0);
This snippet selects the two clamp elements and adds the class animate-in, which comes with the following CSS styling:
.robotarm {
margin-left: -2048px;
margin-right: -2048px;
}
.animate-in {
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
margin-left: -1300px;
margin-right: -1300px;
}
In theory, this setup should render the arms off-screen and then smoothly animate them into view.
If I try adding the animation classes directly without the setTimeout, the animation doesn't trigger at all.
Why does the addClass need to be inside a setTimeout function to work properly? Should I kickstart the animation with some other event like onPageLoadTheFirstTime specific to Angular? Mainly seeking guidance on the recommended approach rather than opting for another quick fix.
Appreciate any insights you can offer!