37. [动画]CSS样式中的动画效果
作为动画知识的第一节,为了不让小伙伴有太大的学习压力,我们先从熟悉的动画效果入手。也就是用 CSS 的方式写一段动画,当作对以前知识的复习。
动画和过渡的区别
先来看两个概念,有人作了一年前端切图,也没弄明白,CSS 中动画和过渡的概念,我在这里给你讲清楚。
动画:一个 DOM 元素,从一个地方移到另一个地方,这种效果叫做动画。比如一个层从浏览器的左侧移动到右侧,这就是动画。
过渡:是 DOM 元素中的一个属性,缓慢的变成另一个属性,这种效果叫做过渡效果。比如一个层从红色慢慢变成黄色,这种就是过渡。
在开发中两者经常混合使用,也就是说动画的过程中伴随着过渡,所以很多小伙伴搞不清楚两者的概念。
这节我们先来看一下 CSS 动画的写法。
准备标准文件和新建演示文件
为了以后方便学习,动画这一季大家可以在本地新建一个 vue 文件夹,然后在 vscode 中打开这个文件夹,在文件夹中新建一个文件base.html
,这个就是我们的基础代码,以后都可以复制这段代码。就好像一个基础的模板一样。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>mybj</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({ template: ` <div>码云笔记前端博客</div>` }) const vm = app.mount("#app") </script>
有了基础代码以后,我们再新建一个文件Demo01.html
,把上面的代码复制到这里,然后继续编写。
编写 CSS 动画效果
现在要作的效果是,一个 DIV 从左侧,移动到右侧 25 像素,再移动到 50 像素,然后再回来,整个动画持续 3 秒钟。
在VSCode
中,创建一个 CSS 区域,然后编写样式。这时候我们要使用 CSS 中的animation
属性,然后再使用关键帧keyframes
指定详细的动画过程。
<style> .animation { animation: leftToRight 3s; } @keyframes leftToRight { 0% { transform: translateX(0px); } 25% { transform: translateX(25px); } 50% { transform: translateX(50px); } 75% { transform: translateX(25px); } 100% { transform: translateX(0px); } } </style>
写完 CSS 样式,可以在要使用样式的部分加入这个样式,我这里直接加入到 Vue 模板中的 div 里。
template: ` <div class="animation">码云笔记前端博客</div>`
这些写完就可以到浏览器中预览一下效果了。可以看到文字有了动画效果了,其实更准确的说是 DOM 元素 Div 有了动画效果。
写一个按钮控制动画效果
动画效果有了,现在提高一下难度,就是写一个按钮,用按钮来控制这个 Div 的动画效果,按一下有动画,再按一下没有动画。
先来做一个数据项,这个数据项的作用就是控制动画起不起作用。
data() { return { isAnimate: { animation: false } } },
有了这个数据项,就可以编写按钮,然后绑定一个方法,控制这个数据项,从而实现动画效果是否使用了。说白了,还是数据驱动开发的理念。
<div><button @click="handleClick">启动/关闭</button></div>
现在还缺少对应的方法,methods 的业务逻辑很简单,只有一代码,只要对isAnimate
取反就可以了。
methods: { handleClick() { this.isAnimate.animation = !this.isAnimate.animation } },
这时候我们就可以用按钮控制动画是否起作用了。但是注意,到目前位置我们都是以前学的知识,没有涉及到 Vue3 的动画,就当我们对 CSS 动画的一个复习。这里给出全部代码,方便你学习。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>mybj</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 { isAnimate: { animation: false } } }, methods: { handleClick() { this.isAnimate.animation = !this.isAnimate.animation } }, template: ` <div :class="isAnimate">码云笔记前端博客</div> <div><button @click="handleClick">启动/关闭</button></div> ` }) const vm = app.mount("#app") </script> <style> .animation { animation: leftToRight 3s; } @keyframes leftToRight { 0% { transform: translateX(0px); } 25% { transform: translateX(25px); } 50% { transform: translateX(50px); } 75% { transform: translateX(25px); } 100% { transform: translateX(0px); } } </style>
码云笔记 » 37. [动画]CSS样式中的动画效果