NSVue js transition hooks

methods.js

methods: {
  beforeEnter(el) {
    el.setAttribute('translateY', -200);
  },
  enter(el, done) {
    el.nativeView
      .animate({
        translate: {
          x: 0,
          y: 0,
        },
        duration: 200,
        curve: AnimationCurve.ease,
      })
      .then(done);
  },
  afterEnter(el) {
   //
  },
  beforeLeave() {
    if (this.$refs.searchField) {
      this.$refs.searchField.nativeView.dismissSoftInput();
    }
  },
  async leave(el, done) {
    el.nativeView
      .animate({
        translate: {
          x: 0,
          y: -200,
        },
        duration: 100,
        curve: AnimationCurve.ease,
      })
      .then(done);
  },
}

template.html

<transition
  mode="out-in"
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @before-leave="beforeLeave"
  @leave="leave"
  :css="false">
  <GridLayout key="a" v-if="searching" columns="*">
    ...
  </GridLayout>
  <GridLayout key="b" v-else columns="*">
    ...
  </GridLayout>
</transition>