vue实现div在指定位置动画显示和隐藏

<div class="searchBodyM" :class="{active:show}" :style="'top:'+top+'px'">
      <transition name="custom-classes-transition" enter-active-class="animated fadeInDown"
                  leave-active-class="animated fadeOutUp">
        <div class="searchBodys" v-if="show" :style="'top:'+top+'px'">
          
        </div>
      </transition>
    </div>

getShows() {
  this.newTop = this.$refs.searchBody.getBoundingClientRect().top
  this.show = !this.show
},
computed: {
    top: function () {
      var getTop = this.newTop + 54
      return getTop
    }
},

css

.searchBodyM {
  position: fixed;
  z-index: 8;
  width: 100%;
  height: 0;
  overflow: hidden;
  left: 0;
  -webkit-transition: 1.2s;
  transition: 1.2s;
}

.searchBodyM.active {
  height: 350px;
  -webkit-transition: 0.2s;
  transition: 0.2s;
}