Vue.js过渡动画：掌握transition技巧

Vue.js 提供了一个过渡组件，允许你在 Vue 组件或元素上添加动画和过渡效果。过渡组件的基本用法如下：

1. 在 Vue 组件中，使用 transition 标签包裹要添加过渡效果的元素。
2. 使用 transition 标签的 name 属性指定一个过渡名称。
3. 在 CSS 中，使用该过渡名称来定义过渡效果。

下面是一个简单的示例，演示如何在 Vue.js 中使用过渡组件：

首先新建一个基于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用来进行延时设置，即延时多长时间后开始执行动画。

#记录我的2024##前端##职场感悟##vue3##vue##动画#