vue制作幻灯⽚时涉及的transition动画（动图）
幻灯⽚使⽤频率很⾼，就是各个⽹站的轮播⼤图。为了使图⽚更加平滑的过渡，就考虑给幻灯⽚加上transition动画。先看实现的效果，然后再分析动画原理。
上图可以看出，幻灯⽚是慢慢的滑出来，⽽不是⼀下⼀下的跳出来。
Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进⼊/离开过渡。
1. 条件渲染 (使⽤ v-if)
2. 条件展⽰ (使⽤ v-show)
3. 动态组件
4. 组件根节点
1.原理：
1.如果想要给哪个元素添加动画那么必须给当前元素添加⼀个标签transitionn，transitionn标签只有name属性，name为动画的名
javascript幻灯片称。如下：
<transition name=""></transition>
2.如果需要⼀组元素进⾏动画的时候需要将<transition>标签换成<transition-group>标签。
记得⼀定要设置⼀下key值 。
因为当有相同标签名的元素切换时，需要通过 key 特性设置唯⼀的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。
3.当前元素必须是显⽰/隐藏的状态 （v-if v-show）。即当前元素要设置v-if 或者 v-show，否则动画不会显⽰。
2.当插⼊或删除包含在 transition 组件中的元素时，Vue 做了什么？
1. ⾃动嗅探⽬标元素是否应⽤了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
2. 如果过渡组件提供了 JavaScript 钩⼦函数，这些钩⼦函数将在恰当的时机被调⽤。
3. 如果没有到 JavaScript 钩⼦并且也没有检测到 CSS 过渡/动画，DOM 操作 (插⼊/删除) 在下⼀帧中⽴即执⾏。(注意：此指浏览
器逐帧动画机制，和 Vue 的 nextTick 概念不同)。
2.过渡的类名
过渡的类名即是使动画起作⽤的关键地⽅，要在对应的类中设置动画属性。
在进⼊/离开的过渡中，会有 6 个 class 切换。分别如下：
动画进⼊：
1. name名-enter：定义进⼊过渡的开始状态。在元素被插⼊之前⽣效，在元素被插⼊之后的下⼀帧移除。（瞬间被移除）
2. name名-enter-active：定义进⼊过渡⽣效时的状态。在整个进⼊过渡的阶段中应⽤，在元素被插⼊之前⽣效，在过渡/动画完成之后移
除。
这个类可以被⽤来定义进⼊过渡的过程时间，延迟和曲线函数
3. name名-enter-to: 2.1.8版及以上 定义进⼊过渡的结束状态。在元素被插⼊之后下⼀帧⽣效 (与此同时 v-enter 被移除)，在过渡/动画
完成之后移除。
离开：
4. name名-leave: 定义离开过渡的开始状态。在离开过渡被触发时⽴刻⽣效，下⼀帧被移除。（瞬间被移除）
5. name名-leave-active：定义离开过渡⽣效时的状态。在整个离开过渡的阶段中应⽤，在离开过渡被触发时⽴刻⽣效，在过渡/动画完成
之后移除。
这个类可以被⽤来定义离开过渡的过程时间，延迟和曲线函数
6. name名-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下⼀帧⽣效 (与此同时 v-leave 被删除)，在过渡/
动画完成之后移除。
对于这些在过渡中切换的类名来说，如果你使⽤⼀个没有名字的 <transition>，则name名 默认是v- 。如果你使⽤了 <transition name="my-transition">，那么 name名-enter 会替换为 my-transition-enter。
进⼊和离开时动画⽰例图：
动画仅⽀持c3动画（透明度）。c3动画包括位移、 缩放、倾斜、旋转等。。
3.幻灯⽚动画⽰例
html实现代码：
css属性设置：
transform 属性向元素应⽤ 2D 或 3D 转换。该属性允许我们对元素进⾏旋转、缩放、移动或倾斜。transform的值：
值描述
translateX(x)定义转换，只是⽤ X 轴的值。
translateY(y)定义转换，只是⽤ Y 轴的值。
translateZ(z)定义 3D 转换，只是⽤ Z 轴的值。
scaleX(x)通过设置 X 轴的值来定义缩放转换。
scaleY(y)通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)通过设置 Z 轴的值来定义缩放转换。
rotateX(angle)定义沿着 X 轴的 3D 旋转。
rotateY(angle)定义沿着 X 轴的 3D 旋转。
rotateZ(angle)定义沿着 Y 轴的 3D 旋转。
skewX(angle)定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)定义沿着 Y 轴的 2D 倾斜转换
本项⽬源码：
每天进步 ⼀点点、充实⼀点点、加油

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。