CSS

当你想执行弹簧动画时，通常会使用像 Motion 这样的 JavaScript 库。但 Motion 也能够通过 CSS 生成弹簧动画，无论是在服务器端还是浏览器端。

在本指南中，我们将学习如何使用 CSS 创建弹簧动画，并结合各种库和框架。

• React 服务端组件

• 通过 style 属性

• CSS-in-JS (Styled Components, Tamagui)

• Astro

• React

• Vue

我们还将学习如何在跨浏览器支持方面，回退到无动画或不同的动画。

导入

为了生成我们的弹簧 CSS 规则，我们将使用 Motion 的 spring()函数.

import { spring } from "motion"

概览

spring 有两个使其非常适合 CSS 生成的特性。

1. 一个 toString() 方法。

2. 一个 spring(visualDuration, bounce) 简写形式。

toString() 将弹簧作为 CSS 持续时间和缓动函数返回。新的简写形式使创建弹簧动画比以往任何时候都更简单。

放在一起，我们可以创建像这样的 CSS 规则

transition: transform ${spring(0.5, 0.2)};

// Outputs:
// transition: transform 800ms linear(...)

生成的持续时间可能比提供给 spring 的时间更长，因为它接受新的 visualDuration选项，这使得编辑弹簧动画和与其他过渡动画协调变得更容易。

transition:
  opacity 0.5s ease-out,
  transform ${spring(0.5, 0.2)};

在这里，transform 实际上会花费更长的时间，但 看起来它的动画时间和 opacity 相似。这是因为 visualDuration 定义了动画首次到达目标所需的时间，而不是之后的“弹性部分”。

服务端生成

React 服务端组件

使用 React 服务端组件 (RSC)，可以通过 style 属性设置弹簧动画。

<div style={{ transition: "all " + spring() }}>

这段代码将完全在服务端运行，没有运行时开销。

也可以使用 style 标签

<style>{`
  button:hover {
    transition: transform ${spring(0.8, 0)};
    transform: scale(1.2);
  }
`}</style>

客户端生成

style 属性

你可以在运行时在一个元素上设置 transition，然后再更改它的其他值。

const element = document.querySelector("button")

element.style.transition = "transform " + spring(0.3)
element.style.transform = "scale(1.2)"

CSS-in-JS

CSS-in-JS 遵循相同的基本字符串连接方法，具体模式取决于你选择的库。

Styled Components

const Button = styled.button`
  transition: opacity ${spring(0.5)};
`

Tamagui

export const RoundedSquare = styled(View, {
  transition: "opacity " + spring(0.5)
})

Astro

在Astro，你可以使用 JavaScript 将弹簧定义为 CSS 变量，然后在你的 CSS 中使用 var() 来使用该值。

<style define:vars={{ spring: spring(0.2, 0) }}>
  span {
    transition: transform var(--spring);
  }
</style>

Vue

const springTransition = ref(spring(0.3, 1))

<div :style="{ transition: 'filter ' + springTransition }"></div>

回退

默认情况下，如果浏览器不支持 linear() 缓动函数，它将忽略你的动画。

在 CSS 中，可以设置第二个具有较低优先级的 transition 作为回退，但这可能不被所有 CSS 生成器支持（例如通过 style 设置）。

transition: filter 0.3s ease-out;
transition: filter ${spring(0.3)};

这是 spring() 简写形式接受 visualDuration 而不是 duration 的另一个好处 - 你可以为这两个动画使用相同的持续时间，它们会感觉像是在相同的时间内完成。