前端vue transition过渡动画

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

<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用来进行延时设置，即延时多长时间后开始执行动画。

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