CSS 过渡动画效果

前提：组件 | 元素 要有v-if 或者 v-show指令才可以进行过渡动画。
介绍CSS3 transition属性的原理、组成部分、包括参数与动画CSS的属性、持续事件、时间函数和延迟，以及如何在实际项目中使用和调整。通过实例学习如何为网页元素添加平滑的过渡动画，提升用户体验。

transition 属性简介

transition属性是CSS3中用于定义元素从一种样式状态平滑过渡另一种状态的动画状态。当元素的指定样式属性发生变化时，transition会自动为其添加一个过渡动画。

.element {
  transition: property duration timing-function delay;
}

transition属性组成部分
property： 指定参与过渡动画的CSS属性。可以是单个属性名，也可以是多个属性名组成的列表。

/* 单个属性 */
.transition-element {
  transition-property: background-color;
}

/* 多个属性 */
.smooth-transition {
  transition-property: opacity, transform;
}

duration ：定义过渡动画的持续时间，以秒（s）或毫秒（ms）为单位。

.fast-transition {
  transition-duration: 0.3s;
}

timing-function 决定了过渡过程中速度的变化模式，如匀速、加速、减速等。常用的值包括：
ease（默认值）：开始和结束时慢时快。linear：匀速过渡。ease-in：开始时慢，然后逐渐加快。ease-out：开始时快，然后逐渐减慢。ease-in-out：开始和结束时慢，中间快。cubic-bizier(n,n,n,n):自定义贝塞尔曲线。

.ease-in-out-transition {
  transition-timing-function: ease-in-out;
}

.custom-curve-transition {
  transition-timing-function: cubic-bezier(0.⅔, 0.0, 0.6⅔, 1);
}

delay：设置过渡动画开始前的等待事件，同样以秒或毫秒为单位。

.delayed-transition {
  transition-delay: 0.5s;
}

触发过渡动画
过渡动画通常在CSS样式变化时自动的触发，如通过JavaScript修改元素样式、用户交互（如，:hover、:focus、:active）或媒体查询等。

.button {
  background-color: lightblue;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: darkblue;
}

见写的语法与分拆写法

#  合并
.element {
  transition: background-color 0.5s linear 1s;
}
# 拆分
.element {
  transition-property: background-color;
  transition-duration: 0.5s;
  transition-timing-function: linear;
  transition-delay: 1s;
}