transition组件 的 过渡 和 动画

基于CSS的过渡实现

1、在过渡 效果的使用中 ，key属性需要注意 ： 有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。       参考官方说明：  https://cn.vuejs.org/v2/api/#key

　 注： v-if（v-if-else）条件 渲染中 过渡没有效果，最好检查 是不是 key 没有设置（自己开发时遇到过这个问题，没有设置 不同的key值，结果切换时没有过渡效果）。

2、vue 过渡 效果 使用。 官方文档：https://cn.vuejs.org/v2/guide/transitions.html  和 https://cn.vuejs.org/v2/api/#transition（大纲介绍）

　 注意：具体的动画效果需要自己在css中设置的。有规定的 css类名，页可以自定义相应的类名。

　transition常用属性（Props）：name、appear、mode（控制离开/进入的过渡时间序列，先出后进会比较协调）

　 

3、vue的过渡组件，在进入/离开的过渡中，会有 6 个 class 切换。这6个class类名，都已经定义好了，只有前缀是自己定义的。

　  类名虽然固定了，但是css还是要自己写的。如：

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>
new Vue({
  el: '#demo',
  data: {
    show: true
  }
})
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

• 注意：
  • display 属性的显示/隐藏是没有过渡效果的。所以显/隐 过渡一般用的 visibility 和 opacity属性。
  • CSS3的过渡可以针对很多属性，如显示/隐藏、位置移动、大小变化 等等。而 Vue 中的过渡 只是 针对 进入/离开，这个状态切换的动画。
  • 这6个类名，一次一般只需要使用4个就可以了。因为元素本身就是存在一个状态。所以这个状态的样式 不需要再次设置的。如上例子，只有4个类名。
  • vue提供的 transition 组件，直接设置css无法实现 展开/收起动画，需要js参与计算。https://blog.csdn.net/fengxiaopeng74/article/details/113652342
    一般UI组件库都有提供这种动画效果，如 <el-collapse-transition>。

• transition组件可以参与的  单元素/组件的过渡只有下面4种情况：

  • 条件渲染 (使用 v-if)
  • 条件展示 (使用 v-show)
  • 动态组件
  • 组件根节点

• transition组件 和 CSS3 的过渡有什么区别：

  • transition组件的动画，是因为进入/离开这个动作而 引起 其它样式的改变；而CSS3的过渡，就是两个不同状态的过渡。如进入时的样式 到 离开时的样式过渡。
    说人话就是：transition组件可以在 进入/离开 这个动作下，实现样式的过渡。本质上就是利用CSS3的过渡来实现的。
  • 实现过程：元素进入时，先把 v-enter，v-enter-active类名给元素；接着立刻把v-enter去掉，换成v-enter-to类名。两个不同样式切花进入过渡状态。
    其实就是把 CSS3 种JS实现的类名切花，封装到 transition组件种实现了。
    js需要在显示隐藏操作时，修改类名，而 transition组件，自动监控里面元素的显示/隐藏，自动修改类名。

 

基于CSS的动画实现【推荐这种，可以少写几个类名】

  <transition name="bounce">
    <p v-if="show">Lorem ipsum dolor sitrmentum id.</p>
  </transition>

.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}