|
//未完工~
提前
笔记不适合初始学习,主要用来快速恢复之前忘记的知识
如果您已经会了css的过渡属性transition和贝塞尔曲线,可以跳过提前
如果您忘的差不多了或不知道,可以看下一下这个 CSS 贝塞尔曲线 和 过渡属性transition
资源
Velocity.js
<script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.0/velocity.min.js"></script>
官方文档
http://velocityjs.org/
Vue过渡`
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果
Vue 提供了transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡
?条件渲染 (使用 v-if)
?条件展示 (使用 v-show)
?动态组件
?组件根节点
当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：
?自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
?如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
?如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)
如果没有声明class,那么过渡类顺序无所谓
如果声明了class,那么 想要应用CSS属性,必须把过渡类放在class的后面,不然应用过渡类后会被原本的类覆盖
例如:
<style>
.v-enter{
color:green;
}
.a{
color:red;
}
.v-enter{
color:green;
}
</style>
<transition>
<div class="a"></div>
</transition>
transition内置组件
Props(道具)
name : String
用于自动生成 CSS 过渡类名。例如：name: ‘fade’ 将自动拓展为 .fade-enter，.fade-enter-active 等。默认类名为 “v”
enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class
: String
他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用
如果声明了enter-class,就不会在自动插入.v-enter,其它也一样
和下面的过渡类名一个道理
appear : Boolean
是否在初始渲染时使用过渡,默认为 false ,也就是一进入网页,就开始进入过渡,默认使用:进入过渡类和进入过渡事件
建议使用事件就不要使用class,处理起来很麻烦的!
<Transition appear></Transition>
appear-class
appear-active-class
appear-to-class
:String
初始过渡,替换掉默认使用的进入过渡类
type : String
指定过渡事件类型，侦听过渡何时结束。有效值为 transition 和 animation ,默认 Vue.js 将自动检测出持续时间长的为过渡事件类型
duration : Number , { enter: Number, leave: Number }
单位:ms
指定过渡类名的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件
它并不能代表过渡属性,只是设置了过渡类名的持续时间,时间到被移除
css : Boolean
是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子,不会在添加class
直接css='false'是不行的,false会被识别为字符串,必须 :css='false'
mode : String
控制离开/进入过渡的时间序列 , 有效的模式有 out-in 和 in-out ；默认同时进行
in-out : 新元素先进行过渡，完成之后当前元素过渡离开
out-in : 当前元素先进行过渡，完成之后新元素过渡进入
它有一个专业术语叫过渡模式
事件
自动在对应的时机触发
enter 进入
before-enter 进入前
after-enter 进入后
enter-cancelled 进入取消(打断)
leave 离开
before-leave 离开前
after-leave 离开后
leave-cancelled 离开取消(打断) (只用于 v-show 中)
appear 初始
before-appear 初始前
after-appear 初始后
appear-cancelled 初始取消(打断)
事件中函数的第一个参数是 过渡元素的实例 ,我不清楚是不是的,反正可以这样用:
el.style.width='200px';
第二个参数是个函数,我们命名为done,只有enter和leave和appear有,其他事件使用会报错
主要用来告诉Vue,过渡执行完了,之后会去触发 after-enter ,after-leave ,after-appear,对应的触发对应的
触发流程是这样的:
?进入前 -> 进入(运行done()) -> 进入后 -> 没了
?进入前 -> 进入(不运行done()) -> 没了
过渡未完成 或 没运行done(),在切换进入/离开,就会触发 打断事件
注意事项
使用钩子,是真实修改,不像class,可以自动插入和移除,所以要手动还原,自由度高,虽然麻烦,不过我挺喜欢的
使用appear这些事件,不需要声明appear道具(属性)
大坑!在写enter函数的时候一定要用延时函数(不知道为什么),不然没过渡效果,这玩意耗了我2个小时,录制时完全是一瞬间变成最后样式,可以自己去录制看看,我说的不是用软件录制,是f12->性能->录制
enter:function (el,done) {
setTimeout(()=>{
done();
},0)
}
大坑在写leave函数的时候,执行done()一定要延时,不然元素立马就被移除了,因为done()会移除元素
例如:
leave:function (el,done) {
setTimeout(()=>{
done();
},延时时间)
}
当有相同标签名的元素切换时，需要通过 key 设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在 <transition>组件中的多个元素设置key 是一个更好的实践
transition-group内置组件
主要用来对v-for
Props(道具)
tag : string
默认为 <span> ,<transition-group>将会被替换成对应的tag元素,属性还在和,is道具很像
move-class : String
覆盖移动过渡期间应用的 CSS 类
用class也行.v-move
当元素需要改变位置时,不突然改变,有个过渡
比如有 删除或插入或排序 ,之前的元素需要改变位置,就会有个过渡
除了 mode，其他 props 和 <transition> 相同
事件
与<transition> 相同
注意事项
内部元素总是需要提供唯一的 key 值
CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身
需要注意的是使用 FLIP过渡的元素不能设置为 display: inline 。作为替代方案，可以设置为 display: inline-block 或者放置于 flex 中
过渡类名
在进入/离开的过渡中，会有 6 个 class 切换
.v-enter：定义进入过渡的开始状态,在元素被插入之前生效，在元素被插入之后的下一帧移除
.v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
.v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
.v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
.v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
.v-leave-to：定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除
过渡自始至终还是会回复到原样式
过渡只是因为元素发生了改变,让元素变化的别那么突然
上面说了,既然是改变,那么我们回头看看.v-enter和.v-enter-to的描述,一个是插入之前,一个是插入之后,所以插入后的改变才叫改变
由于.v-enter-active和.v-enter-to是一起被移除,所以.v-enter-to样式到原样式没有过渡(是瞬间的),除非像下面的特殊过渡一样
进入过渡.v-enter 到 过渡结束 .v-enter-to,是一个变换的过程.v-enter-active,若没有设置它们就会按照原样式来过渡
离开过渡也是一样的
小疑惑
过渡属性定义在非Vue类
下面的代码是这样过渡的:
进入过渡 背景是#000 5s后 背景变为red,此时Vue的过渡结束了,随后.v-enter-to被移除了,但过渡属性设置在.a上,所以还得从red 慢慢(5s)恢复成原样式 deepskyblue ,总共花费 10s
所以尽量不要把过渡属性定义到其他类里,定义到.v-enter-active就可以了,除非你想要这个效果
<style>
.a{
background-color: deepskyblue;
width: 100px;
height: 100px;
transition: 5s;
}
.v-enter{
background-color: #000;
}
.v-enter-to{
background-color: red;
}
</style>
废物.v-leave ?
网上说这是Vue作者的回答:
https://github.com/vuejs/vue/issues/3580
由于对称性和逻辑完整性，这与其他已弃用的 API 不同 - 您不会因为几乎不使用它而切断肢体
好像就是很单纯的想保留它,虽然他没有用
.v-leave生效后,下一帧就被移除了,一瞬间,你眼睛都看不过来
一般都不会用到.v-leave和.v-enter-to
为什么.v-enter不是废物 ?
首先.v-enter是在元素未插入时,就已经生效了
在那一瞬间,元素被插入了,插入时.v-enter就存在,下一帧.v-enter-to被插入了,随后.v-enter被移除,这都是同一帧完成的,又下一帧.v-enter-to生效了,元素发生改变,开始过渡,过渡结束后,.v-enter-to被移除,元素发生改变,由于没有过渡了,所以一瞬间变回原样式
如果不用.v-enter-to
在那一瞬间,元素被插入了,插入时.v-enter就存在,下一帧.v-enter被移除,又下一帧变回原样式,开始过渡
动画
以后补充,这个和过渡差不多
|