AngularJS 1.2.6: ng-class and css transitions

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

    <div class="container"
         ng-init="startAni1 = false; startAni2 = false;">
        <button class="btn btn-default"
                ng-click="startAni1 = !startAni1">Animation 1</button>

        <button class="btn btn-default"
                ng-click="startAni2 = !startAni2">Animation 2</button>
    </div>

    <hr>
    <div class="container">

        <div class="box-base" ng-class="{'show-me': startAni1}">
            Box1: Hello Animations!
        </div>

        <div class="box-base box2" ng-class="{'move-me': startAni2}">
            Box2: Hello transitions!
        </div>

    </div>

CSS

.box-base {
    opacity:0;
    padding: 20px;
    margin: 20px;
    color: white;
    border:1px solid black;
    background: #434343;
     transition: opacity linear 0.5s;
}


.box-base.box2 {
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
    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: red;

}