Explore this example CSS code:
/* animations at the start */
.error-animation.ng-enter {
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
opacity: 0;
}
/* animations on completion */
.error-animation.ng-enter.ng-enter-active {
opacity: 0.7;
}
#my-error {
color: red;
margin-left: 10px;
margin-top: 10px;
opacity: 0.7
}
If an HTML element has both the animation class and a custom ID with the same feature, the transition effect for that feature will not work as expected.
<div id="my-error"
ng-if="error" ng-cloak class="error-animation">
Error
</div>
The issue in the code above arises from the opacity feature.
The ng-enter state is defined by opacity: 0
The ng-enter-active state is defined by opacity: 0.7
The default state sets opacity: 0.7
Since the default state takes precedence over the ng-animate class, it overrides the animation settings (resulting in no animation).
Even if the opacity: 0.7 in the default state is removed, the default opacity becomes 1, leading to transitions from 0 to 0.7 and then from 0.7 to 1.
If you have insights on how to solve this dilemma, your input would be greatly appreciated.
For a live example, you can experiment with this link