【CSS3】transition & animation 动画

过渡(被动)动画 transition

transition-property:

• 指定应用过渡属性的名称：
  all：所有属性都表现出过渡动画（默认）
  none：没有过渡动画
• 可设置多个属性的名称，名称之间用逗号隔开

transition-duration:

• 以 s / ms 为单位指定过渡动画所需的时间
• 默认值为 0s，表示不出现过渡动画
• 可以指定多个时长，每个时长会被应用到由 transition-property 指定的属性上
  ① 如果指定的时长个数 < 属性个数，那么时长列表会重复
  ② 如果指定的时长个数 > 属性个数，那么该列表会被裁减
  两种情况下，属性列表都保持不变

transition-timing-function:

• 用于设置动画的加速度曲线
  1. linear 匀速
  2. ease 慢 -> 较快 -> 慢 (默认)
  3. ease-in 慢入快出
  4. ease-out 快入慢出
  5. ease-in-out 慢入慢出
  6. 也可以直接用贝塞尔曲线设置 cubic-bezier(n, n, n, n)
• 关于贝塞尔曲线 可以参考 https://www.runoob.com/cssref/func-cubic-bezier.html
• 可以规定多个 timing-function，根据 transition-property 的列表给每个 CSS 属性应用相应的 timing-function
  ① 如果 timing-function 的个数 < 主列表中数量，缺少的值被设置为默认值 ease
  ② 如果 timing-function 的个数 > 主列表中数量，timing-function 函数列表会被截断至合适的大小
  这 2 种情况下声明的 CSS 属性都是有效的

transition-delay:

• 规定在过渡效果开始作用之前需要等待的时间
• 值以 s / ms 为单位，默认为 0s
• 正数为动画延迟开始，负数为动画提前开始

复合写法

transition: transition-property transition-duration transition-timing-function transition-delay;

• 可同时设置多个属性的过渡效果：

transition: margin-right 2s, color 1s;

与 hover 选择器的配合使用

• 元素被触发和结束时都有过渡效果
  1. 给需要的元素设置 transition，注意 transition-duration 必须设置
• 元素仅在被触发时有过渡效果
  1. 给元素设置 transition-duration 为 0
  2. 给元素的 hover 选择器设置 transition-duration 为需要的时间
• 元素仅在结束时有过渡效果
  1. 给元素设置 transition-duration 为所需的时间
  2. 给元素的 hover 选择器设置 transition-duration 为 0

其实就是 CSS 样式的覆盖问题，hover 写在后面，后面的样式会覆盖前面的样式

关键帧(主动)动画 animation

animation-name:

• 用于自定义动画的名称，以设置关键帧
• none：特殊关键字，表示无关键帧

animation-duration:

• 用于设置动画周期的时长
• 默认值为 0s，表示无动画

animation-timing-function

• 用于设置动画的速度曲线
  1. 参考 transition-timing-function
  2. steps(int[, start|end])：指定了时间函数中的间隔数量（步长）
     int 指定函数的间隔数，该参数是一个正整数
     start|end 是可选的，表示动画是从时间段的开头连续还是末尾连续
     （start：表示直接开始；end：表示戛然而止，默认值）

animation-delay:

• 用于设置动画于何时开始
  • 正数为动画延迟开始，负数为动画提前开始
• 默认为 0，代表动画在应用到元素上后立即开始执行

animation-iteration-count:

• 用于设置动画运行的次数
• 可设置数字，可以为小数 (1.5) ，默认为 1
• 可设置关键字 infinite ，表示无限循环播放动画
• 如果指定了多个值，每次播放动画时，将使用列表中的下一个值，在使用最后一个值后循环回第一个值

animation-direction:

• 用于设置动画播放的方向
  1. normal 正向播放 (默认)
  2. reverse 反向播放
  3. alternate 奇数次正向播放，偶数次反向播放
  4. alternate-reverse 偶数次正向播放，奇数次反向播放

animation-fill-mode:

• 用于设置动画结束后的位置
  1. forwards 停在终点位置
  2. backwards 返回初始位置 (默认)

animation-play-state:

• 用于设置动画的播放状态，一般与 hover 选择器配合使用
  1. running 播放动画 (默认)
  2. paused 停止动画

复合写法

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

制作动画关键针 @keyframes

• from - to 分别设置动画的第一帧、最后一帧的状态；与 steps(n) 搭配使用

@keyframes 动画的名称 {
	from {
		起始状态
	}
	to {
		终点状态
	}
}

• 使用百分比%设置关键帧，关键帧按时间划分；0~100 之间可按需插入任意帧

@keyframes 动画的名称 {
	0% {
		起始状态
	}
	50% {
		中间的某个状态
	}
	100% {
		终点状态
	}
}

demo

通过动画实现点击节流

animation

<template>
    <button onclick="console.log('节流')">节流button>
template>

<style lang="scss" scoped>
button {
    animation: throttle 2s step-end forwards;
}

button:active {
    animation: none;
}

@keyframes throttle {
    from {
        pointer-events: none; // 元素永远不会成为鼠标事件的 target
        // 但是, 当其后代元素的 pointer-events 属性指定其他值时, 鼠标事件可以指向后代元素;
        // 在这种情况下, 鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器
    }

    to {
        pointer-events: all; // 只有鼠标指针在元素内部或边界时, 元素才会成为鼠标事件的目标
        // SVG 中 fill, stroke 和 visibility 属性的值不影响事件处理
    }
}
style>

transition

<template>
    <button onclick="console.log('节流')">节流button>
template>

<script setup lang="ts">
// 通过 transitionstart 监听 transition 动画开始事件
document.addEventListener("transitionstart", (ev: any) => {
    ev.target.disabled = true;
});
// 通过 transitionend 监听 transition 动画结束事件
document.addEventListener("transitionend", (ev: any) => {
    ev.target.disabled = false;
});
script>

<style lang="scss" scoped>
button {
    opacity: 0.99;
    transition: opacity 2s;
}

button:not(:disabled):active {
    opacity: 1;
    transition: 0s;
}
style>

实现点击动画

通过 transition 实现较简单动画

<template>
    <button class="button">Defaultbutton>
template>

<style lang="scss" scoped>
$primary-color: royalblue;

.button {
    padding: 8px 16px;
    border: 1px solid #d9d9d9;
    background-color: transparent;
    border-radius: 2px;
    cursor: pointer;
    transition: .3s;
    position: relative;

    &:hover {
        color: $primary-color;
        border-color: currentColor; // currentColor 表示当前元素被应用的 color 颜色值
    }
}

/* 通过 after 伪元素实现水波效果 */
.button::after {
    content: '';
    position: absolute;
    inset: 0; // inset 是 top, right, bottom, left 属性的简写;  它具有与边距简写相同的多值语法
    opacity: 0;
    box-shadow: 0 0 0 6px $primary-color;
    transition: .3s;
}

.button:active::after {
    box-shadow: none;
    opacity: 0.4;
    transition: 0s;
}
style>

通过 animition 实现较复杂动画

<template>
    <button class="button">Defaultbutton>
template>

<style lang="scss" scoped>
.button {
    animation: joggle 0s; // 将时间设置为 0, 防止进入页面时动画先触发一次
}

.button:hover {
    animation-duration: 1s;
}

.button:active {
    animation: none;
}

@keyframes joggle {
    from {
        transform: scale3d(1, 1, 1)
    }

    10%,
    20% {
        transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg)
    }

    30%,
    50%,
    70%,
    90% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg)
    }

    40%,
    60%,
    80% {
        transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg)
    }

    to {
        transform: scale3d(1, 1, 1)
    }
}
style>