37 CSS样式中的动画效果
[动画] 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>CSS样式中的动画效果</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>willem笔记</div>`
})
const vm = app.mount("#app")
</script>
</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">willem笔记</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>demo</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">willem</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>
</html>
相关文章
- 从零开始学习jQuery (七) jQuery动画-让页面动起来!
- 【Vue】通过Animate.css实现第三方动画效果示例(图文+实例)
- android动画具体解释六 XML中定义动画
- CSS 奇技淫巧:动态高度过渡动画
- CSS(字体相关知识以及css三种样式表使用方法)
- 基于 C++ OpenGL框架实现日地月运动模型动画【100010591】
- SwiftUI Button实现切换颜色动画
- SwiftUI 动画特效库大全之18个超酷文本动画库 泛型泛型传递
- 浅析css动画知识:用法介绍(规则与关键帧)animation-delay为负值提前进行动画、动画函数(三次贝塞尔曲线与步骤缓动函数)补间动画与逐帧动画效果、如何控制动画运行或暂停及控制元素各阶段状态、动画循环次数与方向
- CSS学习知识整理(五)Css display(显示)
- CSS学习知识整理(二)Css 背景
- Unity制作GIF动画播放组件
- Android 动画具体解释Frame动画 (Drawable Animation)
- 《慕客网:IOS-动画入门》学习笔记
- CSS动画总结效果
- 仿360水波评分特效、加速球特效、水波动态加载动画、可改造成圆形进度条,很丝滑!
- CSS 加粗(css font-weight)