Ng-Class-7

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="http://www.w3.org/1999/xhtml">
<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></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>

Output