前端vue transition过渡动画

首先新建一个基于uni-app框架为transition.vue的测试文件,在其中编写如下JavaScript、HTML和CSS代码:

xml 复制代码
<template><view class="content"><div id="Application"><div :class="cls" @click="run"></div></div></view></template>

<script>export default {data() {return {

cls: "demo"}},onLoad() {

},methods: {run() {if (this.cls == "demo") {this.cls = "demo-ani"} else {this.cls = "demo"}}}}</script>

<style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}

/* .demo {width: 100px;height: 100px;background-color: red;} */

.demo {width: 100px;height: 100px;background-color: red;transition-property: width, height, background-color;transition-duration: 2s;transition-timing-function: linear;transition-delay: 1s;}

.demo-ani {width: 200px;height: 200px;background-color: blue;transition: width 2s, height 2s, background-color 2s;}</style>

如以上代码所示,CSS中定义的demo-ani类中指定了transition属性,这个属性中可以设置要过渡的属性以及动画时间。运行上面的代码,单击页面中的色块,可以看到色块变大的过程会附带动画效果,颜色变化的过程也附带动画效果。上面的示例代码实际上使用了简写方式,我们也可以逐条属性对动画效果进行设置。

其中,transition-property用来设置动画的属性;transition-duration用来设置动画的执行时长;transition-timing-function用来设置动画的执行方式,linear表示以线性的方式执行;transition-delay用来进行延时设置,即延时多长时间后开始执行动画。

8.1.2 keyframes动画

transition动画适合用来创建简单的过渡效果。CSS3中支持使用animation属性来配置更加复杂的动画效果。animation属性根据keyframes配置来执行基于关键帧的动画效果。新建一个名为keyframes.vue的测试文件。编写如下代码:

xml 复制代码
<template><view class="content"><div id="Application"><div :class="cls" @click="run"></div></div></view></template>

<script>export default {data() {return {

cls: "demo"}},onLoad() {

},methods: {run() {if (this.cls == "demo") {this.cls = "demo-ani"} else {this.cls = "demo"}}}}</script>

<style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;padding-top: 60px;}

/* .demo {width: 100px;height: 100px;background-color: red;} */



@keyframes animation1 {0% {background-color: red;width: 100px;height: 100px;}

25% {background-color: orchid;width: 200px;height: 200px;}

75% {background-color: green;width: 150px;height: 150px;}

100% {background-color: blue;width: 200px;height: 200px;}}

.demo {width: 100px;height: 100px;background-color: red;}

.demo-ani {animation: animation1 4s linear;width: 200px;height: 200px;background-color: blue;}</style>

在上面的CSS代码中,keyframes用来定义动画的名称和每个关键帧的状态,0%表示动画起始时的状态,25%表示动画执行到1/4时的状态,同理,100%表示动画的终止状态。对于每个状态,我们将其定义为一个关键帧,在关键帧中,可以定义元素的各种渲染属性,比如宽和高、位置、颜色等。在定义keyframes时,如果只关心起始状态与终止状态,也可以这样定义:

css 复制代码
@keyframes animationl {from {background-color:red; width: 100px; height: 100px;}to {background-color:orchid; width: 200px; height: 200px;}}

定义好了keyframes关键帧,在编写CSS样式代码时可以使用animation属性为其指定动画效果,如以上代码设置要执行的动画为名为animation1的关键帧动画,执行时长为4秒,执行方式为线性。animation的这些配置项也可以分别进行设置,示例如下:

css 复制代码
.demo-ani {/*设置关键帧动画名称 */animation-name:animationl;/*设置动画时长 */animation-duration:3s;/*设置动画播放方式:渐入渐出*/animation-timing-function:ease-in-out;/*设置动画播放的方向*/animation-direction:alternate;/*设置动画播放的次数 */animation-iteration-count: infinite;/*设置动画的播放状态*/animation-play-state:running;/*设置播放动画的延迟时间*/ animation-delay:1s;/*设置动画播放结束应用的元素样式*/ animation-fill-mode:forwards; width: 200px; height: 200px;background-color:blue;

}

通过上面的范例,我们已经基本了解了如何使用原生的CSS,有了这些基础,再使用Vue中提供的动画相关API时会非常容易。

阅读全文下载完整组件代码请关注微信公众号: 前端组件开发

相关推荐
Senar12 分钟前
Web端选择本地文件的几种方式
前端·javascript·html
烛阴29 分钟前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl
姑苏洛言34 分钟前
扫码小程序实现仓库进销存管理中遇到的问题 setStorageSync 存储大小限制错误解决方案
前端·后端
烛阴44 分钟前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_12541 小时前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx1 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
Mikey_n2 小时前
前台调用接口的方式及速率对比
前端
周之鸥2 小时前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
我爱吃朱肉2 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3
机器视觉知识推荐、就业指导2 小时前
开源QML控件:进度条滑动控件(含源码下载链接)
前端·qt·开源·qml