Confused about ionic and ngAnimate events

ionic-v1
1

I’ve been trying to make my own animations for elements in my app (like a box that floats up when the keyboard is opened… etc)

I’ve tried using the ng-enter & ng-enter-active events which are supposed(?) to be dispatched from page elements. I’ve been reading various docs on CSS animations and it’s all a rather contradictory mishmash between Angular’s documentation, ui-router’s documentation and Ionic’s documentation.

I’ve tried every combination of events & elements I can think of. But what I currently have is:

.animated-view.ng-enter {
  top: 0px;
  -webkit-transition:1s linear all;
  transition:1s linear all;
}
.animated-view.ng-enter-active {
  top: 200px;
}

And my page looks something like this:

<ion-view>
    <ion-nav-bar class="bar-stable"></ion-nav-bar>
    <ion-content animation="animated-view" has-bouncing="false">
              ... stuff
    </ion-content>
</ion-view>

Basically I’m trying trigger custom CSS transition when the ui-view loads up.

What events can I use to trigger CSS style changes on ionic views? Thanks.