Q: 這個看起來像貓爪的東西是什麼？
A: 喵？

本篇開始將實作選單的微動畫，比較特別的要來說說transform的順序帶給動態效果的影響！

謎音1：本次示意影片會看起來卡頓，程式實際運作是流暢的，請見諒
謎音2：轉檔過程不知道怎麼了呢.. 還找不到解法ＱＱ

先來個置底的選單按鈕

以.btn為可點擊的按鈕，在點擊時對元素#container新增.is-active，接著在.is-active時讓每個小的按鈕.item位移。

<script>
  function toggle() {
    document.getElementById('container').classList.toggle('is-active');
  }
</script>

<style>
  .container {
    position: fixed;
    display: inline-block;
    bottom: -80px;
  }
  .btn {
    position: relative;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background-color: Pink;
    cursor: pointer;
    z-index: 1;
  }
  .item {
    position: absolute;
    left: calc(50% - 40px);
    top: 40px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: PaleVioletRed;
    cursor: pointer;
  }
  .is-active.container .item:nth-child(1) {
    transform: translate(-135px, -45px);
  }
  .is-active.container .item:nth-child(2) {
    transform: translate(-60px, -135px);
  }
  .is-active.container .item:nth-child(3) {
    transform: translate(60px, -135px);
  }
  .is-active.container .item:nth-child(4) {
    transform: translate(135px, -45px);
  }
</style>

<div id="container" class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="btn" onclick="toggle()"></div>
</div>

由內而外

再來希望可以有由內而外彈出的漸變效果，所以我們會需要在 .item 添加屬性 transition。加上屬性後我們可以看到 .item 的彈出看起來比較流暢。

<style>
  .item {
    transition: .2s;
  }
</style>

由小放大

接著為了讓小圓圈有由小放大到指定位置的漸變效果，所以我們會需要將.item 的屬性 transform 的值 scale 設置為0代表比例為0，這時候畫面是看不到 .item 元素也點擊不到的，並在 .is-active 的狀態時讓 scale 變回1。所以我們要在原本的 transform 值再添加 scale。

<style>
  .item {
    transform: scale(0);
  }
  .is-active.container .item:nth-child(1) {
    transform: translate(-135px, -45px) scale(1);
  }
  .is-active.container .item:nth-child(2) {
    transform: translate(-60px, -135px) scale(1);
  }
  .is-active.container .item:nth-child(3) {
    transform: translate(60px, -135px) scale(1);
  }
  .is-active.container .item:nth-child(4) {
    transform: translate(135px, -45px) scale(1);
  }
</style>

寫到這裡應該把想要的動畫效果完成了，但當我們點擊大圓時會發現，並不是我們希望的由小放大及由內而外的效果，而是像一開始一樣直接位移，這是因為 transform 在執行的時候會先執行前面的值，再執行後面的值，所以以上方的css來說，當 .item 被加上 class.is-actice 時， .item會從 translate(0, 0) 位移到 translate(-135px, 45px) ，再從 scale(0) 放大回 scale(1)。

修改順序

如果我們希望 .item 有由小放大的效果時，會需要將上方的css改寫為下方程式碼，這樣transform在執行時，就會從 scale(0) 先變成 scale(1)，再從 translate(0, 0) 位移到 translate(-135px, 45px)，這時候我們就可以看到由小放大及由內而外的效果。

<style>
  .is-active.container .item:nth-child(1) {
    transform: scale(1) translate(-135px, -45px);
  }
  .is-active.container .item:nth-child(2) {
    transform: scale(1) translate(-60px, -135px);
  }
  .is-active.container .item:nth-child(3) {
    transform: scale(1) translate(60px, -135px);
  }
  .is-active.container .item:nth-child(4) {
    transform: scale(1) translate(135px, -45px);
  }
</style>

加transition的位置

記得上一篇有提到加transition的位置，如果只設置在.is-active下，那麼當class移除了的時候就不會有漸變效果，那如果在有.is-active跟沒有的情況下，對元素下不同的transition，那麼看起來也會不一樣。

<style>
  .is-active.container .item:nth-child(1) {
    transition: .1s;
  }
  .is-active.container .item:nth-child(2) {
    transition: .15s;
  }
  .is-active.container .item:nth-child(3) {
    transition: .2s;
  }
  .is-active.container .item:nth-child(4) {
    transition: .25s;
  }
</style>

如果有寫錯的地方，歡迎點評！ 會及時改進～
如果有更好的寫法，歡迎指教！ 希望各位不吝賜教～
如果想看更多效果，歡迎敲碗！ 提供示意圖小編寫寫看～
如果內容疑似侵權，拜託告知！ 內容皆為小編理解後原創～
如果對你有點幫助，拿去用吧！