CSS微动画 - 弹出来的选单 Part.1

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>

如果有写错的地方，欢迎点评！ 会及时改进～
如果有更好的写法，欢迎指教！ 希望各位不吝赐教～
如果想看更多效果，欢迎敲碗！ 提供示意图小编写写看～
如果内容疑似侵权，拜托告知！ 内容皆为小编理解後原创～
如果对你有点帮助，拿去用吧！