Hi there, I'm diving into Angular and still getting the hang of CSS3 (more of a backend dev myself!)
I've been exploring how custom transitions are handled in Angular using CSS3 keyframes.
Here is what I have so far:
In my markup:
<div id="welcome-container" ng-hide="test">
...
</div>
In my controller:
$scope.test = false;
// ... performing some tasks that take longer than 3-4 seconds
$scope.test = true;
And in my CSS:
#welcome-container.ng-hide {
animation: 1s mycustomkeyframe;
-webkit-animation: 1s mycustomkeyframe;
}
@keyframes mycustomkeyframe {
from { opacity: 1; }
to { opacity: 0; }
}
@-webkit-keyframes mycustomkeyframe {
from { opacity: 1; }
to { opacity: 0; }
}
I managed to get this example working with ng-hide-add and ng-hide-active classes, but I'm struggling with keyframes. The div hides, but no animation occurs!! I want to implement keyframes for smooth easing transitions similar to jQuery (but without actually using jQuery :P)
If anyone could offer assistance, I would greatly appreciate it!