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小时内删除。