Day 11：「动起来！动起来！」- 用 Tailwind 简单做出过渡和动画效果

还记得我们在之前做过变化模式吗？
没错，就是滑鼠悬停之後会变色的那个。

我们今天呢，就是要来帮它们加上过渡效果和动画！

今天我们就不多讲废话了，直接开始吧！
 

旧图重发

<div class="flex justify-evenly p-10 focus-within:bg-green-100 group">
  <box class="bg-red-500 hover:bg-red-400 ring-red-300 focus:ring-4 group-hover:text-gray-600" tabindex="0">
    1
  </box>

  <box class="bg-blue-500 hover:bg-blue-400 ring-blue-300 focus:ring-4 group-hover:text-gray-600" tabindex="1">
    2
  </box>
</div>

欸 ...！ 今天这个段落的标题是谁上的！
说什麽旧图重发 ... 它是看起来长一样没错，
但其实是重新截图的啊！

啊算了，今天的范本其实跟上次是同一个， 就放在这边，
快点打开一起跟着做作业吧！

今天的功能也简单哦～ Let's ... GO！
 

过渡效果 (transition-property)

透过使用 transition-{支援类型} 这个功能，我们可以设定 / 改变 元素支援过渡效果的样式类型，例如 transition-colors 功能是元素颜色变换时才具有过渡效果，但其他样式改变时并不会有过渡效果。

以下是预设可以使用的过渡效果功能：

• transition-none
• transition-all
• transition
• transition-colors
• transition-opacity
• transition-shadow
• transition-transform

使用对应的过渡效果可以让画面浏览起来不那麽耗效能，因为你并不是对每个属性都开启过渡效果。

我们这边来偷懒一下， 为了让它可以之後不管增加什麽属性的改变都能够拥有过渡效果，我们为最外层及两个方块都加上 transition-all：

<div class="flex justify-evenly p-10 focus-within:bg-green-100 group transition-all">
  <box class="bg-red-500 hover:bg-red-400 ring-red-300 focus:ring-4 group-hover:text-gray-600 transition-all" tabindex="0">
    1
  </box>

  <box class="bg-blue-500 hover:bg-blue-400 ring-blue-300 focus:ring-4 group-hover:text-gray-600 transition-all" tabindex="1">
    2
  </box>
</div>

(啊，就算放图你们也看不出效果差异，所以就不放了)

加完之後会发现马上就有过渡效果，整个质感大大大提升！

蛤! 什麽！？ 你说这样就很不错了，後面不用介绍了？
别这样嘛～ 还是要介绍一下啦～

因为有接下来这个功能会让你更方便、更有质感！
 

过渡效果持续时间 (transition-duration)

透过使用 duration-{支援类型} 这个功能，我们可以设定 / 改变 元素过渡效果的持续时间，例如 duration-1000 功能是将元素过渡效果的持续时间设定为 1000 ms，也就是 1 秒。

以下是预设可以使用的过渡效果持续时间功能：

• duration-75
• duration-100
• duration-150
• duration-200
• duration-300
• duration-500
• duration-700
• duration-1000
   

为了感受过渡时间的效果差异，我们在最外层上使用 duration-1000 来使它的过渡效果持续时间比其他人慢很多。(预设是 150 ms)

<div class="flex justify-evenly p-10 focus-within:bg-green-100 group transition-all duration-1000">
  <box class="bg-red-500 hover:bg-red-400 ring-red-300 focus:ring-4 group-hover:text-gray-600 transition-all" tabindex="0">
    1
  </box>

  <box class="bg-blue-500 hover:bg-blue-400 ring-blue-300 focus:ring-4 group-hover:text-gray-600 transition-all" tabindex="1">
    2
  </box>
</div>

欸，应该 ... 看得出来吧？

好没关系，接下来再看不出来就 ... 就看不出来啦！
 

过渡效果延迟 (transition-delay)

透过使用 delay-{支援类型} 这个功能，我们可以设定 / 改变 元素过渡效果发生的延迟时间，例如 delay-1000 功能是将元素过渡效果的发生时间延迟 1000 ms，也就是 1 秒。

以下是预设可以使用的过渡效果延迟功能：

• delay-75
• delay-100
• delay-150
• delay-200
• delay-300
• delay-500
• delay-700
• delay-1000
   

用 delay-1000 加在最外层，让最外层的过渡效果更慢更明显吧：

<div class="flex justify-evenly p-10 focus-within:bg-green-100 group transition-all duration-1000 delay-1000">
  <box class="bg-red-500 hover:bg-red-400 ring-red-300 focus:ring-4 group-hover:text-gray-600 transition-all" tabindex="0">
    1
  </box>

  <box class="bg-blue-500 hover:bg-blue-400 ring-blue-300 focus:ring-4 group-hover:text-gray-600 transition-all" tabindex="1">
    2
  </box>
</div>

这下总看得出来了！ 摁，你肯定看得出来。

再来，我们就不是要继续玩过渡效果罗，而是动画！
 

动画 (animation)

透过使用 animate-{动画类型} 这个功能，我们可以设定 / 改变 元素的动画效果，例如 animate-spin 功能是将元素加上旋转的动画。

以下是预设可以使用的动画功能：

• animate-none
• animate-spin
• animate-ping
• animate-pulse
• animate-bounce

这些动画功能都是已经预设的动画组合，而且都是属於较常用的动画。

接着来试着把红色方块用 animate-bounce 加上弹跳动画，然後用 animate-pulse 让蓝色方块具有脉冲效果 (类似闪烁)：

<div class="flex justify-evenly p-10 focus-within:bg-green-100 group transition-all duration-1000 delay-1000">
  <box class="bg-red-500 hover:bg-red-400 ring-red-300 focus:ring-4 group-hover:text-gray-600 transition-all animate-bounce" tabindex="0">
    1
  </box>

  <box class="bg-blue-500 hover:bg-blue-400 ring-blue-300 focus:ring-4 group-hover:text-gray-600 transition-all animate-pulse" tabindex="1">
    2
  </box>
</div>

元素们是不是又更活泼生动了呢！
这样一来就可以做出很多很棒的应用啦~
 

今天就大概到这边罗！
请好好休息为下一篇做准备，

因为下一篇 ... 要开始来安装和设定了！
那可就没有像前面这麽轻松愉快罗～
 

给你们的回家作业：

• 作业实施要点：
  • 试着让方块有不同的过渡时间，还有换个更有趣的动画吧！
• 沉闷的方块们：带它们破冰吧！会变得活泼的哦！
• 生动的方块们：快看！它们现在似乎有点好动！
   

关於兔兔们：

• Tailwind CSS 台湾官网
• Tailwind CSS 台湾 (脸书粉丝专页)
• 兔兔教 × Tailwind CSS Taiwan (脸书社群)
• 兔兔教大本营

( # 兔兔小声说 )

兔子小知识

[ 动如脱兔 ]
军队行动迅速，像逃脱的兔子一般。语本《孙子集注．卷十一．九地》。後比喻动作十分敏捷。

去百科查了才知道是这个解释，
但我怎麽看都是骂军队撤退逃窜的很快 XD