Vue知识点（5）-- 动画

CSS 动画是 Vue3 中实现组件动画效果的高效方式，主要通过 CSS transitions 和 keyframes 动画

CSS Keyframes（关键帧动画）

用来创建复杂的动画序列，可以精确控制动画的各个阶段。

核心语法：

@keyframes animationName {0% { /* 起始状态 */ }50% { /* 中间状态 */ }100% { /* 结束状态 */ }
}.cssClass{animation: name            // 动画名称 (对应 @keyframes 名称)(必需)duration        // 动画持续时间(必需)timing-function // 动画速度曲线delay           // 动画延迟时间iteration-count // 动画播放次数direction       // 动画播放方向fill-mode       // 动画前后如何应用样式play-state;     // 动画运行状态
}

每一个参数都可以单独的修改和使用

1. animation-name (必需)
   指定要应用的 @keyframes 动画名称

@keyframes example {from { opacity: 0; }to { opacity: 1; }
}.element {animation-name: example;
}

2. animation-duration (必需)
   定义动画完成一个周期所需时间

.element {animation-duration: 2s; /* 可以是秒(s)或毫秒(ms) */
}

3. animation-timing-function
   定义动画的速度曲线

   值	描述
   ease	默认值，慢快慢
   linear	匀速
   ease-in	慢开始
   ease-out	慢结束
   ease-in-out	慢开始和结束
   cubic-bezier(n,n,n,n)	自定义贝塞尔曲线
   steps(n)	分步动画

.element {animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

4. animation-delay
   定义动画开始前的延迟时间

.element {animation-delay: 1s; /* 1秒后开始动画 */
}

5. animation-iteration-count
   定义动画播放次数

   值	描述
   number	具体次数 (如 2, 3.5)
   infinite	无限循环

.element {animation-iteration-count: infinite;
}

6. animation-direction
   定义动画播放方向

   值	描述
   normal	默认，正向播放
   reverse	反向播放
   alternate	先正向后反向交替
   alternate-reverse	先反向后正向交替

.element {animation-direction: alternate;
}

7. animation-fill-mode
   定义动画执行前后如何应用样式

   值	描述
   none	默认，不应用任何样式
   forwards	保持最后一帧样式
   backwards	应用第一帧样式
   both	同时应用 forwards 和 backwards

.element {animation-fill-mode: forwards;
}

8. animation-play-state
   控制动画的播放状态

   值	描述
   running	默认，动画运行
   paused	动画暂停

.element:hover {animation-play-state: paused;
}

案例实践：

//基于CSS class的动画
<template><div :class="{ shake: disabled }"><button @click="warnDisabled">Click me</button><span v-if="disabled">This feature is disabled!</span></div>
</template><script setup>
import { ref } from 'vue'
const disabled = ref(false)
const warnDisabled = () => {disabled.value = truesetTimeout(() => {disabled.value = false}, 1500)
}
</script><style scoped>
.shake {animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform: translate3d(0, 0, 0);
}
@keyframes shake {10%,90% {transform: translate3d(-1px, 0, 0);}20%,80% {transform: translate3d(2px, 0, 0);}30%,50%,70% {transform: translate3d(-4px, 0, 0);}40%,60% {transform: translate3d(4px, 0, 0);}
}
</style>

CSS Transitions（过渡动画）

用于在元素从一种状态转变为另一种状态时添加平滑的过渡效果。

核心语法：

.cssClass{transition: [property]       // 要过渡的CSS属性[duration]       // 过渡持续时间(必需)[timing-function] // 过渡速度曲线[delay];         // 过渡延迟时间
}

1. transition-property(可选)
   指定应用过渡效果的 CSS 属性名称

常见可过渡属性：
color, background-color
opacity
transform (包括 translate, scale, rotate 等)
width, height
margin, padding
border 相关属性

.element {transition-property: opacity, transform;/* 或者 */transition-property: all; /* 所有可过渡属性 */
}

2. transition-duration(必需)
   定义过渡效果持续时间

.element {transition-duration: 0.3s; /* 可以是秒(s)或毫秒(ms) */
}

3. transition-timing-function
   定义过渡效果的速度曲线

   值	描述
   ease	默认值，慢快慢
   linear	匀速
   ease-in	慢开始
   ease-out	慢结束
   ease-in-out	慢开始和结束
   cubic-bezier(n,n,n,n)	自定义贝塞尔曲线
   steps(n)	分步过渡

.element {transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

4. transition-delay(可选)
   定义过渡效果开始前的延迟时间

.element {transition-delay: 0.2s; /* 0.2秒后开始过渡 */
}

案例实践：

//状态驱动的动画
<template><div@mousemove="onMousemove":style="{ backgroundColor: `hsl(${x}, 80%, 50%)` }"class="movearea"><p>Move your mouse across this div...</p><p>x: {{ x }}</p></div>
</template><script setup>
import { ref } from 'vue'
const x = ref(0)
const onMousemove = (e) => {x.value = e.clientX
}
</script><style scoped>
.movearea {transition: 0.3s background-color ease;
}
</style>

transform

transform 是 CSS 中用于对元素进行 2D 或 3D 变换的强大属性，它可以改变元素的形状、位置和方向而不影响文档流。

可以组合多个变换函数，空格分隔，从右向左依次执行

transform: rotate(45deg) scale(1.2) translateX(50px);
/* 先平移 → 然后缩放 → 最后旋转 */

2D

1. 位移（Translate）

transform: translateX(50px);     /* 水平移动 */
transform: translateY(-20px);    /* 垂直移动 */
transform: translate(50px, 20px); /* 同时XY移动 */

2. 旋转（Rotate）

transform: rotate(45deg);       /* 顺时针旋转45度 */
transform: rotate(-90deg);      /* 逆时针旋转90度 */

3. 缩放（Scale）

transform: scale(1.5);          /* 均匀放大1.5倍 */
transform: scaleX(0.5);         /* 水平缩小一半 */
transform: scaleY(1.2);         /* 垂直放大1.2倍 */
transform: scale(1.2, 0.8);     /* 水平放大，垂直缩小 */

4. 倾斜（Skew）

transform: skewX(15deg);        /* 水平倾斜 */
transform: skewY(-10deg);       /* 垂直倾斜 */
transform: skew(15deg, -10deg); /* 同时XY倾斜 */

3D

1. 3D位移

transform: translateZ(100px);     /* Z轴移动 */
transform: translate3d(50px, 20px, 100px); /* XYZ移动 */

2. 3D旋转

transform: rotateX(45deg);       /* 绕X轴旋转 */
transform: rotateY(30deg);       /* 绕Y轴旋转 */
transform: rotateZ(15deg);       /* 绕Z轴旋转 */
transform: rotate3d(1, 1, 0, 45deg); /* 自定义轴旋转 */

3. 3D缩放

transform: scaleZ(1.5);         /* Z轴缩放 */
transform: scale3d(1.2, 1.2, 1.5); /* XYZ缩放 */

4. 透视（Perspective）

transform: perspective(500px) rotateY(45deg);

指定观察者与 z=0 平面的距离
值越小，透视效果越强（类似广角镜头）
值越大，透视效果越弱（类似长焦镜头）
必须为正数

相关属性

1. transform-origin
   设置变换的基准点（默认是元素中心）

transform-origin: 50% 50%;     /* 默认值 */
transform-origin: left top;    /* 左上角 */
transform-origin: 20px 30px;   /* 具体坐标 */
transform-origin: bottom right 50px; /* 3D变换时Z轴 */

2. transform-style
   指定子元素是否保留3D位置

transform-style: flat;         /* 默认，子元素不保留3D位置 */
transform-style: preserve-3d;  /* 子元素保留3D位置 */

3. perspective
   设置3D变换的视距

perspective: 1000px;          /* 在父元素上设置 */

4. backface-visibility
   定义元素背面是否可见

backface-visibility: visible;  /* 默认，背面可见 */
backface-visibility: hidden;   /* 背面不可见 */

案例实践：

//3d翻转卡片
<template><div class="flip-container"><div class="flipper"><div class="front">正面</div><div class="back">背面</div></div></div>
</template><style scoped>
.flip-container {perspective: 100px;background: #644a68;
}
.flipper {transition: transform 3s;transform-style: preserve-3d;font-size: 30px;
}
.flip-container:hover .flipper {transform: rotateY(180deg);
}
.front,
.back {backface-visibility: hidden;
}
.back {transform: rotateY(180deg);
}
</style>