过渡属性

过渡属性由一个对象表示，该对象包含变体的所有过渡参数。

它们是构成变体的两个部分之一，另一个部分是Motion 属性。

编排

延迟

您可以指定一个延迟，每次推送过渡时都会添加该延迟。

<div
  v-motion
  :initial="{
    scale: 1,
  }"
  :enter="{
    scale: 2,
    transition: {
      delay: 1000,
    },
  }"
/>
这个动画将被节流 1 秒。 ☝️

重复

支持原生的 Popmotion Repeat 功能。

有三个参数可用

  • repeat，动画将重复的次数。可以设置为 Infinity。
  • repeatDelay，重复动画前等待的持续时间，以毫秒为单位。
  • repeatType，支持 loop、mirror、reverse。默认值为 loop。
<div
  v-motion
  :initial="{
    scale: 1,
  }"
  :enter="{
    scale: 2,
    transition: {
      repeat: Infinity,
      repeatType: 'mirror',
    },
  }"
/>
Zboing!. ☝️

过渡类型

支持两种类型的动画。

对于大多数常用可动画属性，它将使用生成的弹簧过渡。

其余属性可能会使用关键帧。

弹簧

弹簧用于创建动态和自然的动画。

它支持多个参数

  • 刚度

较高的刚度将产生更快的动画。

  • 阻尼

与刚度相反。阻尼相对于刚度越低，动画就越有弹性。

  • 质量

物体的质量，较重的物体加速和减速需要更长的时间。

<div
  v-motion
  :initial="{
    y: 100,
    opacity: 0,
  }"
  :enter="{
    y: 0,
    opacity: 1,
    transition: {
      type: 'spring',
      stiffness: 250,
      damping: 25,
      mass: 0.5,
    },
  }"
/>

关键帧

关键帧主要用于颜色相关的动画，因为弹簧并非为此而设计。

但它也适用于数字。

它支持多个参数

  • 持续时间

动画的持续时间，以毫秒为单位。

默认为 800。

  • 缓动

支持多种类型

  • 一个缓动名称
  • 缓动名称数组
  • 缓动函数
  • 缓动数组
  • 使用 4 个数字数组的 cubic bezier 定义

支持的缓动名称

  • linear
  • easeIn, easeOut, easeInOut
  • circIn, circOut, circInOut
  • backIn, backOut, backInOut
  • anticipate
<div
  v-motion
  :initial="{
    y: 100,
    opacity: 0,
  }"
  :enter="{
    y: 0,
    opacity: 1,
    transition: {
      duration: 300,
      type: 'keyframes',
      ease: 'easeIn',
    },
  }"
/>

逐键过渡定义

过渡属性支持逐键过渡定义。

它允许您创建复杂的动画，而无需使用 apply 函数。

为此，您必须在过渡定义中定义特定于键的过渡。

<div
  v-motion
  :initial="{
    y: 100,
    opacity: 0,
  }"
  :enter="{
    y: 0,
    opacity: 1,
    transition: {
      y: {
        delay: 1600,
      },
      opacity: {
        duration: 1600,
      },
    },
  }"
/>
当 opacity 过渡结束时，y 过渡将开始。 ☝️
目录