Day-16 动画效果 (二)

Transition 使用

昨天讲到元素的变形，而今天的 Transition 就是使用在元素改变时的过场动画效果，比如颜色、形状等，它可以指定需要的是哪一种动画，但威尔猪一般都只有使用 all 而已，没错，它就已包含了全部效果。Tailwind 预设有 transition-none、transition-all、transition、transition-colors、transition-opacity、transition-shadow、transition-transform，其中使用 transition 就已包含了 background-color、border-color、color、fill、stroke、opacity、box-shadow、transform。不过威尔猪实测，不用特别写 transition，只使用了过场动画的持续秒数，Tailwind 依然可以运作，和上一篇讲的 transform 一样，接下来我们看看怎麽使用过场动画吧。

Duration

这是用来计算过场动画效果的持续时间。这边会用毫秒数来当基准，相信看倌们都知道，1 秒等於 1000 毫秒，使用方式为：duration-{毫秒数}，Tailwind 预设秒数为下表：

当然我们觉得秒数不足也可以额外添加，这边我们会使用到 theme.extend.transitionDuration 来做新增，范例如下：

// tailwind.config.js

  module.exports = {
    ...
    theme: {
      ... ,
      extend: {
        transitionDuration: {
         '400': '400ms',
         '600': '600ms',
         '800': '800ms',
         '1500': '1500ms',
         '2000': '2000ms',
        }
      },
      ...
    },
    ...
  }

如果没有使用 Transition，会让动画效果变得生硬。

Timing Function

这是用来控制过场动画的缓和曲线，进出点时的快慢设置，等同於 cubic-bezier，Tailwind 这边帮我们预设了：ease-linear (线性)、ease-in (缓进快出)、ease-out (快进缓出)、ease-in-out (缓进缓出，中间较快)。

当预设的缓和曲线不满足时，我们也可以自行设定，这边我们会使用到 theme.extend.transitionTimingFunction 来做新增，范例如下：

// tailwind.config.js

  module.exports = {
    ...
    theme: {
      ... ,
      extend: {
        transitionTimingFunction: {
         'in-cubic': 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
         'out-cubic': 'cubic-bezier(0.19, 1, 0.22, 1)',
        }
      },
      ...
    },
    ...
  }

如果同学们对这有兴趣，可以到 cubic-bezier 上自行调整参数，并将数值贴过来重新命名即可。

Delay

如果不想要过场动画马上被执行，则可以使用这 Utility，来控制元素延迟过场动画。这边Tailwind 预设和 Duration 使用一模一样的毫秒数，如下表：

当然想额外添加秒数也是和 Duration 方式一样，这边我们会使用到 theme.extend.transitionDelay 来做新增，威尔猪就不特地做范例了。

Animation

而 Tailwind 官方也预设了 4 种动画效果让我们使用，威尔猪觉得满实用的，我们来看看有哪些：

Spin

这会让元素不断地旋转，威尔猪做一个 Loading 的小 icon，可以参考以下范例：

<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="#a855f7" stroke-width="4"></circle>
    <path class="opacity-100" fill="#a855f7" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>

这边可以看 DEMO。

Ping

让元素像雷达或水波纹一样缩放和消失，常用在通知或需要引导使用者点击时。威尔猪做一个小范例样式：

<span class="flex justify-center items-center">
    <span class="animate-ping absolute h-6 w-6 rounded-full bg-red-400 opacity-50"></span>
    <span class="relative rounded-full h-5 w-5 bg-red-500"></span>
</span>

这边可以看 DEMO。

Bounce

让元素上下跳动，常用在画面可向下卷动时。威尔猪做一个小范例：

<span class="flex justify-center">
    <span class="relative rounded-full h-10 w-7 border-2 border-purple-500"></span>
    <span class="animate-bounce absolute h-3 w-1 rounded-full mt-2 bg-purple-500"></span>
</span>

这边可以看 DEMO。

Pulse

让元素淡入和淡出，有呼吸灯的感觉，有点像 Ant Design 的 Skeleton 显示动画效果。威尔猪做一个小范例：

<div class="max-w-sm w-full">
    <div class="animate-pulse flex space-x-4">
        <div class="flex-1 space-y-4">
            <div class="h-4 bg-gray-200 rounded w-2/4"></div>
            <div class="space-y-2">
                <div class="h-4 bg-gray-200 rounded"></div>
                <div class="h-4 bg-gray-200 rounded"></div>
                <div class="h-4 bg-gray-200 rounded w-3/4"></div>
            </div>
        </div>
    </div>
</div>

这边可以看 DEMO。

以上就是这两天动画效果的内容，Tailwind 预设的动画是不是很实用，咱们明天见。