If we click on first button show-me class will apply on that div element because startAni1 value is true and if we click on second button move-me class will apply on that div element because startAni2 value is true.

<!DOCTYPE html> <html xmlns=""> <head> <title>Welcome to LearnKode - A code learning platform</title> <script src=""></script> <style> .box-base { opacity: 0; padding: 10px; margin: 10px; color: white; background: green; } .box-base.box1 { -webkit-transition: opacity linear 0.5s; transition: opacity linear 0.5s; } .box-base.box2 { -webkit-transition: all ease 0.10s; transition: all ease 0.6s; position: absolute; top: 200px; left: 100px; opacity: 1; } .show-me { opacity: 1; } .box-base.box2.move-me { top: 50px; left: 400px; opacity: 1; background-color: pink; } </style> </head> <body ng-app> <div> <div class="container" ng-init="startAni1 = false; startAni2 = false;"> <input type="button" value="Animation 1" ng-click="startAni1 =!startAni1" /> <input type="button" value="Animation 2" ng-click="startAni2=!startAni2" /> <div class="box-base box1" ng-class="{true:'show-me',false: ''}[startAni1]">Box1: Hello learnIt transitions!</div> <div class="box-base box2" ng-class="{true:'move-me',false: ''}[startAni2]">Box2: Hello learnIt transitions!</div> </div> </div> </body> </html>