Vue过渡和动画实现

Vue过渡&动画实现

使用transition内置组件来给单个元素或组件实现过渡动画：官网动画组件和API

当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

1. 自动嗅探目标元素是否应用了CSS过渡或者动画，如果有，那么在恰当的时机添加/删除 CSS类名
2. 如果 transition 组件提供了JavaScript钩子函数，这些钩子函数将在恰当的时机被调用
3. 如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画，DOM插入、删除操作将会立即执行

基本使用

(transition动画)

<transition name="ysj"> <!--name的值为样式类名前缀，不写默认前缀为v- -->
  <h2 v-if="isShow">Hello World</h2>
</transition>

<style scoped>
  .ysj-enter-from , .ysj-leave-to {
    opacity: 0;
  }
  .ysj-enter-to, .ysj-enter-from { /*元素离开之前，进入之后opacity默认为1，所以此处可省略不写*/
    opacity: 1;
  }
  .ysj-enter-active, .ysj-leave-active {
    transition: opacity .3s ease;
  }
</style>
复制代码

常用的6个class

• v-enter-from：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

• v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动 画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

• v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除)，在过渡/ 动画完成之后移除。

• v-leave-from：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

• v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在 过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

• v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from 被删除)，在过渡/ 动画完成之后移除。

animation动画

.ysj-enter-active { /*块级元素独占一行，缩小时会整行缩小，里面的文字就会到处晃，需要转成行块 */
  animation: bounce 1s ease;
}
.ysj-leave-active {
  animation: bounce 1s ease reverse; /*reverse：动画反转*/
}

@keyframes bounce {
  0% {
    transform:  scale(0);
  }
  50% {
    transform:  scale(1.2);
  }
  100% {
    transform:  scale(1);
  }
}
复制代码

同时使用

同时使用 transition 和 animation

.ysj-enter-from, .ysj-leave-to {
  opacity: 0;
}
.ysj-enter-active, .ysj-leave-active {
  transition: opacity 1s ease;
}

.ysj-enter-active {
  animation: bounce 1s ease;
}
.ysj-leave-active {
  animation: bounce 1s ease reverse; /*reverse：动画反转*/
}

@k