<transition name='slide-fade'>
      <basic-info v-if="!payUpgradeformDataShow" ></basic-info>
     </transition>

  .slide-fade-enter-active {transition: all .2s ease;}
  .slide-fade-leave-active {transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);}
  .slide-fade-enter, .slide-fade-leave-to{transform: translateX(5px);opacity: 0;}

vue显示隐藏动画的实现

首先给文字绑定一个click事件showInfo，给你需要进行添加动画的view添加animation并且传一个值animationData给他

同时需要在data中赋初值animationData: {}，在onload中进行this.animation = uni.createAnimation({})，这样就完成动画的创建。

然后在点击事件showInfo的方法中进行动画的设置，最后用export将动画传给animationData，这样就完成了动画实现。

需要注意的是，需要给进行动画播放的内容的样式中，添加z-index，这样使其显示在页面最上方，这样就不会出现播放动画的时候挤掉原本写的样式。并且最开始要隐藏的话，还需要在样式中将margin-left赋值为负的。

过渡效果类似于推拉门：

<template>
  <div id="app">
     <button class="btn" @click="show = !show">click</button>
    <transition name='fade'>
      <div class="box1" v-if="show">
        <div class="box2"></div>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  
  data() {
    return {
      show: true
    }
  },
}
</script>
<style lang="less">
.box1 {
  width: 200px;
  height: 200px;
  background-color: green;
  // position: absolute;
  // overflow: hidden;
}
.box2 {
  width: 50px;
  height: 50px;
  background-color: red;
  position: fixed;
  // top: 60px;
  // left: 30px;
}
.fade-enter-active, .fade-leave-active {
  transition: 1s;
}
.fade-enter, .fade-leave-to{
   opacity: 0;
  transform: translateX(-25rem);
}
</style>

然后：发现固定定位仿佛是对