码云 42. [动画]vue3过渡和动画并用小技巧
这节我们学习一下过渡和动画并用的一些可选择项和注意事项，特别时过渡和动画时长不一致时的处理策略。
构建一个过渡和动画并用的代码
新建一个文件Demo42.html，写上如下代码，因为下面代码都是之前章节写过的代码，这里不再重复解释，只是对 css 进行些修改而已，最终实现页面既有动画，又有过渡效果。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mybj</title>
<style>
@keyframes comein {
0% {
transform: translateX(-120px)
}
100% {
transform: translateX(0px)
}
}
@keyframes comeout {
0% {
transform: translateX(0px)
}
100% {
transform: translateX(-120px)
}
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
.v-enter-to,
.v-leave-from {
opacity: 1;
}
.v-enter-active {
animation: comein 3s;
transition: opacity 3s ease-out;
}
.v-leave-active {
animation: comeout 3s;
transition: opacity 3s ease-out;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
isShow: false
}
},
methods: {
hanldClick() {
this.isShow = !this.isShow
}
},
template: `
<transition>
<div v-if="isShow">码云笔记前端博客</div>
</transition>
<button @click="hanldClick">切换动画</button>
`
})
const vm = app.mount("#app")
</script>
为了查看方便，把过渡和动画的时间都变成 3 秒。然后到浏览器中进行查看，可以看到这时候过渡和动画都非常正常。
过渡和动画时长不一致的处理
有些时候过渡和动画时长并不是一致的，比如过渡时间是 7 秒，动画时间还是 3 秒。在进场动画时，你可能还感觉不到 Bug，但在出场动画时，就会有严重的问题。动画结束后，为了显示过渡效果，元素又回到了页面上，直到过渡结束，才消失。
为了解决这个问题，可以在<transition>标签上加入type='animation'属性，意思是不管过渡时长是多少，动画结束，整个过程结束。
template: `
<transition type="animation">
<div v-if="isShow">码云笔记前端博客</div>
</transition>
<button @click="hanldClick">切换动画</button>
`
当然你也可以把动画时间调长为 7 秒，然后过渡调整为 3 秒，这时候你可以使用type='transition'，属性，避免 Bug。现在的意思就是以过渡时长为准，过渡结束，动画结束。我们来看一下效果。
.v-enter-active {
animation: comein 7s;
transition: opacity 3s ease-out;
}
.v-leave-active {
animation: comeout 7s;
transition: opacity 3s ease-out;
}
模板部分修改如下：
template: `
<transition type="transition">
<div v-if="isShow">码云笔记前端博客</div>
</transition>
<button @click="hanldClick">切换动画</button>
`
这时候过渡结束，动画也随之结束。不过这时候看起来很不自然，因为子还没有走到它应该走的位置，结果动画结束了，就会有跳帧现象。
属性控制动画和过渡时长
还有一种情况，就是我们不管 CSS 中的动画和过渡时长，以标签为准。可以绑定属性<transition :duration="1000"> 来控制时长，意思是 1 秒后，结束动画和过渡。注意这里的 1000 是毫秒的意思，也就是 1 秒。
template: `
<transition :duration="1000">
<div v-if="isShow">码云笔记前端博客</div>
</transition>
<button @click="hanldClick">切换动画</button>
`
这时候再到浏览器中查看，可以看到 1 秒种过渡和动画虽没有完成，但是还是停止了。
duration除了能写一个数字之外，还可以写对象进去，比如入场的时候 1 秒种，出厂的时候 3 秒钟，就可以这样写。
<transition :duration="{enter:1000,leave:3000}">
这就是动画和过渡同时使用时的一些控制选项和注意事项。下节我们学习一下用 JavaScript 配合 Vue3 来制作动画。
以上关于42. [动画]vue3过渡和动画并用小技巧的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 42. [动画]vue3过渡和动画并用小技巧
