vue css动画,vue的transition过渡动画
在插入、更新或移除DOM时，Transition Vue以不同的方式提供了多种应用程序过渡效果。本文主要介绍如何使用vue实现css转场和动画的相关信息。有需要的可以参考一下。
目录
一、转场和动画的区别二。用Vue实现基本的css转场和动画I .动画II。过渡三。使用过渡标签实现单个元素/组件的过渡和动画效果1。过渡2基本介绍。过渡班3。过渡示例4。动画示例5。过渡6的名称属性。自定义转换类名7。设置过渡和动画8。持续时间属性9。用js IV实现动画。组件和元件切换动画的实现。状态动画概述。
一、过渡和动画的区别
转换：通常用于表示元素属性状态的变化。
动画：通常用来展示元素的运动。
二、使用Vue实现基础得css过渡与动画
1. 动画
/* css */
@关键帧向左向右{
0% {
transform:translate x(-100px)；
}
50% {
transform:translate x(-50px)；
}
100% {
transform:translate x(0)；
}
}。动画{
动画：leftToRight 3s
}
//js
const app=Vue.createApp({
data() {
返回{
动画：{
动画：真实
}
}
},
方法：{
handleClick(){
this.animate.animation=！这个.动画.动画
}
},
模板：` 1
你好/div
按钮@click=handleClick 开关/按钮
`
});
2. 过渡
/* css */。过渡{
过渡：背景色3s线性0s；
}。黄金{
背景色：金色；
}。青色{
背景色：青色；
}
//js
const app=Vue.createApp({
data() {
返回{
动画：{
过渡：没错，
黄金：没错，
青色：假
}
}
},
方法：{
handleClick() {
this.animate.gold=！this . animate . gold；
this.animate.cyan=！this . animate . cyan；
}
},
模板：` 1
你好/div
按钮@click=handleClick 开关/按钮
`
});
以上是通过设置class属性实现的，也可以通过设置style属性实现：
/* css */。过渡{
过渡：背景色3s线性0s；
}
//js
data() {
返回{
过渡：“过渡”，
样式对象：{
背景色：“金色”
}
}
},
方法：{
handleClick() {
if(this . style object . background color=== gold ){
this . style object . background color= cyan ；
}否则{
this . style object . background color= gold ；
}
}
},
模板：` 1
div:class= transition :style= style object hello/div
按钮@click=handleClick 开关/按钮
`
三、使用transition标签实现单元素/组件的过渡和动画效果
1. transition 的基本介绍
过渡元素作为单个元素/组件的过渡效果。
过渡将仅应用过渡效果到其包裹的内容，不会额外渲染 DOM 元素不会出现在可检查的组件层次结构中。
2. transition 的过渡class
在进入/离开的转换中，将有6个等级开关：
V-enter-from:定义过渡的开始状态。它在元素插入之前生效，并在元素插入之后的下一帧被移除。
V-enter-active:定义转换生效时的状态。它应用于整个过渡阶段，在插入元素之前生效，并在过渡/动画完成后移除。这个类可以用来定义过程时间，延迟和曲线函数的过渡。
V-enter-to:定义进入转换的结束状态。下一帧在元素插入后生效(同时，v-enter-from被移除)，在转场/动画完成后移除。
V-leave-from:定义离开转换的开始状态。当偏离过渡被触发时，它立即生效，并且下一帧被移除。
五-离开-活动：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
五-离开至：离开过渡的结束状态。在离开过渡被触发之后下一帧生效（与此同时离开被删除),在过渡/动画完成之后移除。
3. 过渡示例
将需要过渡的元素使用过渡标签包裹。设置过渡需要的类，可从以上六种班级中选择。
/* css */
/* .v-enter-from {
不透明度：0;
}。v-enter-active {
过渡：不透明1s缓解；
}。v-enter-to {
不透明度：1;
}。五-离开{
不透明度：1;
}。五-离开-活动{
过渡：不透明1s缓解；
}。五-离开到{
不透明度：0;
} */
/* 简写*/。v-enter-from .五-离开到{
不透明度：0;
}。v-回车-激活，0 .五-离开-活动{
过渡：不透明1s缓解；
}
//js
const app=Vue.createApp({
data() {
返回{
显示：真实
}
},
方法：{
handleClick() {
this.show=！这个. show
}
},
模板：` 1
过渡
div v-if=show 您好/div
/过渡
button @click=handleClick 切换/按钮
`
});
4. 动画示例
使用动画效果只需要修改钢性铸铁部分，js部分功能不变。
/* css */
@关键帧抖动{
0% {
transform:平移x(-50px)；
}
50% {
transform:平移x(50px)；
}
100% {
transform:平移x(0px)；
}
}
@关键帧抖动{
0% {
transform:平移x(50px)；
}
50% {
transform:平移x(-50px)；
}
100% {
transform:平移x(0px)；
}
}。v-enter-active{
动画：摇入1s淡入；
}。五-离开-活动{
动画：抖出1s淡入淡出；
}
5. transition的name属性
名称字符串：用于自动生成半铸钢钢性铸铁(铸造半钢)过渡类名，不写默认是五。
名字设置为hy，对应的班级名称也要改为【男子名】亨利开头。
//js
转换名称=hy
div v-if=show 您好/div
/过渡
/* css */。hy-enter-from .嗨-离开到{
不透明度：0;
}。hy-enter-active .嗨-保持活动状态{
过渡：不透明1s缓解；
}
6. 自定义过渡类名
我们可以通过以下属性来自定义过渡类名：
从课堂进入
输入活动类别
进入课堂
离开课堂
离开活动类
请假去上课
他们的优先级高于普通的类名，这对于某视频剪辑软件的过渡系统和其他第三方 CSS 动画库,如Animate.css .结合使用十分有用。
//首先引入样式文件
link rel=样式表 href= https://cdnjs。云层耀斑。com/Ajax/libs/animate。CSS/4。1 .1/动画。量滴CSS rel=外部无跟随/
const app=Vue.createApp({
data() {
返回{
显示：真实
}
},
方法：{
handleClick() {
this.show=！这个. show
}
},
//以自定义过渡类名的方式去添加动画样式
模板：` 1
转换名称=hy
enter-active-class= animate _ _ animate animate _ _ bounce
leave-active-class= animate _ _ animate animate _ _ bounce
div v-if=show 您好/div
/过渡
button @click=handleClick 切换/按钮
`
});
7. 同时设置过渡和动画
在一些场景中，你需要给同一个元素同时设置过渡和动画，比如动画很快的被触发并完成了，而过渡效果还没结束。
在这种情况中，你就需要使用类型属性并设置动画或过渡来明确声明你需要某视频剪辑软件监听的类型。
类型字符串。指定过渡事件类型，侦听过渡何时结束。有效值为"过渡"和动画。默认vue。j将自动检测出持续时间长的为过渡事件类型。
在transition时间更长时，使用type=‘transiton的效果：
可以发现动画先完成，但过渡并没有终止会一致执行完，元素才消失。
/* css */
@关键帧抖动{
0% {
transform:平移x(-50px)；
}
50% {
transform:平移x(50px)；
}
100% {
transform:平移x(0px)；
}
}
@关键帧抖动{
0% {
transform:平移x(50px)；
}
50% {
transform:平移x(-50px)；
}
100% {
transform:平移x(0px)；
}
}。v-enter-from。五-离开到{
颜色：红色；
}。v-enter-active {
动画：摇入1s淡入；
过渡：颜色3s渐强；
}。v-回车-到，0 .五-离开{
颜色：绿色；
}。五-离开-活动{
动画：抖出1s淡入淡出；
过渡：颜色3s渐出；
}
//js
const app=Vue.createApp({
data() {
返回{
显示：真实
}
},
方法：{
handleClick() {
this.show=！这个. show
}
},
模板：` 1
过渡类型=过渡
div v-if=show 您好/div
/过渡
button @click=handleClick 切换/按钮
`
});
在transition时间更长时，使用type=‘animation的效果：
可以发现动画完成后，过渡也会立即终止，元素也消失了。
过渡类型=动画
div v-if=show 您好/div
/过渡
8. duration 属性
持续时间-号码 {输入：号码，离开：号码}:指定过渡的持续时间。
比钢性铸铁中设置的时间优先级更高。
单位是：毫秒。
过渡：持续时间=100
div v-if=show 您好/div
/过渡
你也可以定制进入和移出的持续时间：
过渡：持续时间={ enter: 1000，leave: 3000 }
div v-if=show 您好/div
/过渡
9. 使用js实现动画
当只用Java脚本语言过渡的时候，在进入和离开钩中必须使用完成的进行回调。否则，它们将被同步调用，过渡会立即完成。
添加：css=false ，也会让某视频剪辑软件会跳过半铸钢钢性铸铁(铸造半钢)的检测，除了性能略高之外，这可以避免过渡过程中半铸钢钢性铸铁(铸造半钢)规则的影响。
想要用js实现动画，可以在transition的 attribute 中声明 JavaScript 钩子：
@before-enter=beforeEnter
进入过渡前
@enter=enter
进入过渡时
@after-enter=afterEnter
进入过渡后
@ enter-cancelled= enter cancelled
进入过渡被打断时
@before-leave=beforeLeave
离开过渡前
@leave=leave
离开过渡时
@after-leave=afterLeave
离开过渡后
@ leave-cancelled= leave cancelled
离开过渡被打断时
const app=Vue.createApp({
data() {
返回{
显示：真实
}
},
方法：{
handleClick() {
this.show=！这个. show
},
handleBeforeEnter(el){
埃尔。风格。color= red
},
handleEnter(el，done){
const timer=setInterval(()={
if(el.style.color===red){
埃尔。风格。color= blue
}否则{
埃尔。风格。color= red
}
}, 1000);
setTimeout(()={
间隙(定时器);
//动画结束标志
//不执行完成()的话，handleAfterEnter不会执行
done()；
}, 3000)
},
handleAfterEnter(el){
console.log("成功");
}
},
模板：` 1
转换：css=false
@ before-enter=回车前处理
@enter=handleEnter
@after-enter=handleAfterEnter
div v-if=show 您好/div
/过渡
button @click=handleClick 切换/按钮
`
});
//js
const app=Vue.createApp({
组件：[项目一个，项目b]，
data() {
返回{
组件："项目一个"
}
},
方法：{
handleClick() {
if (this.component===item-a) {
这个。component= item-b ；
}否则{
这个。component= item-a ；
}
}
},
模板：` 1
出现过渡模式=出-入
组件：is=component /
/过渡
button @click=handleClick 切换/按钮
`
});
app.component(item-a ，{
模板：` divhello/div
});
app.component(item-b ，{
模板：` divbye/div
});
四、组件和元素切换动画的实现
模式字符串控制离开/进入过渡的时间序列。
有效的模式有先出后进："出-入"和先进后出：进-出；默认同时进行。
可以通过外观属性设置节点在初始渲染的过渡。
/* css */。v-enter-from。五-离开到{
不透明度：0;
}。v-enter-active。五-离开-活动{
过渡：不透明度1s渐强；
}。v-enter-to。五-离开{
不透明度：1;
}
//js
const app=Vue.createApp({
组件：[项目一个，项目b]，
data() {
返回{
组件："项目一个"
}
},
方法：{
handleClick() {
if (this.component===item-a) {
这个。component= item-b ；
}否则{
这个。component= item-a ；
}
}
},
模板：` 1
出现过渡模式=出-入
组件：is=component /
/过渡
button @click=handleClick 切换/按钮
`
});
app.component(item-a ，{
模板：` divhello/div
});
app.component(item-b ，{
模板：` divbye/div
});
五、列表动画
使用过渡组组件，可以同时渲染整个列表。
内部元素总是需要提供唯一的信息标号属性值。
半铸钢钢性铸铁(铸造半钢)过渡的类将会应用在内部的元素中，而不是这个组/容器本身。
过渡组组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需使用新增的五-移动类。
/* css */。内嵌块{
显示：内嵌-块；
右边距：10px
}。v-enter-from。五-离开到{
不透明度：0;
transform:平移y(30px)；
}。v-enter-active {
转场：全1s轻松；
}。五-离开-活动{
位置：绝对；
}。垂直移动{
转场：全1s轻松；
}
六、状态动画
对于数据元素本身而言，通过数字和运算、颜色的显示、SVG 节点的位置、元素的大小和其他的 property这些属性的变化，同样可以实现动画的效果。
数字变化示例：
const app=Vue.createApp({
data() {
返回{
数量：1
}
},
方法：{
handleClick() {
const timer=setInterval(()={
如果(this.number=10) {
清除时间间隔（定时器)
}否则{
这个。号码；
}
}, 100);
}
},
模板：` 1
div{{number}}/div
button @click=handleClick 增加/按钮
`
});
总结
到此这篇关于如何利用某视频剪辑软件实现钢性铸铁过渡和动画的文章就介绍到这了，更多相关某视频剪辑软件实现钢性铸铁过渡和动画内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。