39 制作一个显示隐藏的切换动画效果
Posted wgchen~
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了39 制作一个显示隐藏的切换动画效果相关的知识，希望对你有一定的参考价值。
[动画] 如何利用Vue3制作动画效果
制作一个显示隐藏的切换效果
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo03</title>
<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: `
<div v-if="isShow">willem</div>
<div><button @click="hanldClick">切换动画</button></div>
`
)
const vm = app.mount("#app")
</script>
</html>
上面的代码中我们先写了一个按钮，然后按钮绑定 hanldClick 方法，要控制DOM元素的显示和隐藏，这里我使用了 v-if 。
还需要一个数据项，我定义为了isShow，用来控制元素的显示和隐藏。
这步编写完成可以到浏览器中查看一下效果。
主要查看一下点击按钮是否可以实现文字的显示和隐藏。如果能正常控制，说明代码没有错误。就可以继续向下学习了。
编写CSS样式和制作进入动画
我们编写动画，同样需要编写CSS样式，并且这些CSS样式有固定的名称，你需要符合这些名称规则来进行编写。
先来写一个关键帧动画, 这个关键帧动画作了从左侧位移到屏幕中的效果，
<style>
@keyframes comein
0%
transform:translateX(-100px)
100%
transform:translateX(50px)
</style>
然后需要写一个固定的CSS样式写法 v-enter-active 意思是进入是采用何种动画方式，我们直接用 animation 调用这个动画就可以了。
.v-enter-active
animation: comein 1s;
现在还是没有动画效果的，你还需要给动画的DOM元素加上<transition>标签。
template: `
<transition>
<div v-if="isShow">码云笔记前端博客</div>
</transition>
<div><button @click="hanldClick">切换动画</button></div>
`
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo03</title>
<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">willem</div>
</transition>
<div><button @click="hanldClick">切换动画</button></div>
`
)
const vm = app.mount("#app")
</script>
<style>
.v-enter-active
animation: comein 1s;
@keyframes comein
0%
transform:translateX(-100px)
100%
transform:translateX(50px)
</style>
</html>
编写退出动画
现在已经有了元素进入动画，但是退出时还没有退出动画，所以，我们需要制作一个退出动画。过程和上面的方法类似。
先编写CSS样式。
@keyframes comeout
0%
transform:translateX(50px)
100%
transform:translateX(-100px)
有了 comeout 的关键帧CSS，然后又是一个固定写法 v-leave-active。
.v-leave-active
animation : comeout 1s;
这时候你再点击按钮，就有了退出动画。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo03</title>
<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">willem</div>
</transition>
<div><button @click="hanldClick">切换动画</button></div>
`
)
const vm = app.mount("#app")
</script>
<style>
.v-leave-active
animation : comeout 1s;
@keyframes comeout
0%
transform:translateX(50px)
100%
transform:translateX(300px)
</style>
</html>
总结
以上就是本文的主要内容，我们学习了Vue3中的单个元素进入动画效果的制作，但是看起来还动画效果比较硬，没关系，下节我们再学习一下单个元素过渡效果的制作。
以上是关于39 制作一个显示隐藏的切换动画效果的主要内容，如果未能解决你的问题，请参考以下文章
JQuery: JQuery效果（隐藏显示切换，滑动，淡入淡出，以及动画）