vue 使用 transition 动画实现页面滑入

场景：h5 页面点击页面左上角按钮，左侧会有一个页面滑入当前页面；点击右上角按钮，右侧会有一个页面滑入当前页面。

实现步骤：

1. 把需要添加动画的元素用 transition 标签包起来
2. 给这个 transition 标签一个名字（比如 target）

<!-- 左侧菜单页面 -->
<transition name="leftMenu">
    <div class="left-content" v-show="isShowLeftMenu">    
    </div>
</transition>     
<!-- 右侧菜单页面——商城 -->
<transition name="rightMenu">
    <div class="h-wrap" v-show="isShowRightMenu">
    </div>
</transition>

3. 添加入场动画， class 类名是 “标签名字 + enter-active”

.leftMenu-enter {
  animation: leftMenu-dialog-fade-in 0.3s ease;
}
.leftMenu-leave {
  animation: leftMenu-dialog-fade-out 0.1s ease forwards;
}
.leftMenu-enter-active {
  animation: leftMenu-dialog-fade-in 0.3s ease;
}
.leftMenu-leave-active {
  animation: leftMenu-dialog-fade-out 0.1s ease forwards;
}

.rightMenu-enter {
  animation: rightMenu-dialog-fade-in 0.3s ease;
}
.rightMenu-leave {
  animation: rightMenu-dialog-fade-out 0.3s ease forwards;
}
.rightMenu-enter-active {
  animation: rightMenu-dialog-fade-in 0.3s ease;
}
.rightMenu-leave-active {
  animation: rightMenu-dialog-fade-out 0.3s ease forwards;
}

4. 定义动画效果（@keyframes）

<style>
@keyframes leftMenu-dialog-fade-in {
  0% {
    transform: translate3d(-100%, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes leftMenu-dialog-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(-100%, 0, 0);
    opacity: 1;
  }
}

@keyframes rightMenu-dialog-fade-in {
  0% {
    transform: translate3d(100%, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rightMenu-dialog-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(100%, 0, 0);
    opacity: 1;
  }
}
<style>

页面效果：