快捷導(dǎo)航

使用原生JS添加進(jìn)場(chǎng)和退場(chǎng)動(dòng)畫詳解

更新時(shí)間：2022年10月25日 15:27:04 作者：吳小遠(yuǎn)

總所周知啊，身為一個(gè)合格的前端搬磚工，會(huì)編寫并且添加一些基礎(chǔ)的動(dòng)畫效果可謂是比較基礎(chǔ)且輕車熟路的技能了。本文將教大家如何使用原生JS添加進(jìn)場(chǎng)和退場(chǎng)動(dòng)畫，感興趣的可以了解一下

前言

總所周知啊，身為一個(gè)合格的前端搬磚工，會(huì)編寫并且添加一些基礎(chǔ)的動(dòng)畫效果可謂是比較基礎(chǔ)且輕車熟路的技能了。但是據(jù)我所見，大部分的前端程序員其實(shí)只會(huì)添加進(jìn)場(chǎng)動(dòng)畫，而不知道如何添加退場(chǎng)動(dòng)畫。使用方式，也是簡(jiǎn)單粗暴的添加一個(gè)css類。

比如下面這種情況，增加一個(gè)下拉選項(xiàng)的展開動(dòng)畫。我們會(huì)先準(zhǔn)備好keyframe關(guān)鍵幀和animation屬性的值。

.expand {
    transform-origin: top;
    animation: expand 0.3s ease both;
}

.fold {
    transform-origin: top;
    animation: fold 0.3s ease both;
}

/* 展開 */
@keyframes expand {
    from {
        transform: scaleY(0);
    }
    to {
        transform: scaleY(1);
    }
}

/* 折疊 */
@keyframes fold {
    from {
        transform: scaleY(1);
    }
    to {
        transform: scaleY(0);
    }
}

使用的時(shí)候，就直接把這個(gè)類添加到目標(biāo)元素上面，呈現(xiàn)出來的效果就像這樣：

誠(chéng)然，這樣已經(jīng)基本上能夠滿足目前的絕大部分業(yè)務(wù)需求了，而且，絕大部分的客戶也不會(huì)注意到這個(gè)退場(chǎng)有沒有動(dòng)畫。但是，我作為一個(gè)比較喜歡鉆牛角尖的人，就特別想知道退場(chǎng)動(dòng)畫到底是怎么實(shí)現(xiàn)。不過，由于我入行沒有多久，就趕上了vue普及開來了的潮流，讓我一下子喪失了找尋這個(gè)問題答案的興趣。

vue中的transition標(biāo)簽

自從工作中開始使用了vue這個(gè)框架之后，媽媽再也不用擔(dān)心我不會(huì)添加退場(chǎng)動(dòng)畫了。在vue中，添加進(jìn)場(chǎng)和退場(chǎng)動(dòng)畫都變得非常的容易，只需要像下面這樣就行：

<transition enter-active-class="expand" leave-active-class="fold" appear>
	<ul class="options-ul" v-show="isShow">
        <li class="option">霧切之回光</li>
        <li class="option">飛雷之弦振</li>
        <li class="option">薙草之稻光</li>
        <li class="option">波亂月白經(jīng)津</li>
    </ul>
</transition>

再后來，等我可以比較熟練的應(yīng)對(duì)項(xiàng)目上的問題的時(shí)候，我終于有閑情逸致可以探究一下究竟是怎么回事了。點(diǎn)開DevTools，我發(fā)現(xiàn)在入場(chǎng)動(dòng)畫剛開始執(zhí)行的時(shí)候，目標(biāo)元素上面會(huì)被添加上expand類，但是等到執(zhí)行完畢的時(shí)候，expand就被移除了。而執(zhí)行退場(chǎng)動(dòng)畫的時(shí)候，fold類會(huì)被添加到目標(biāo)元素上，等到退場(chǎng)動(dòng)畫結(jié)束的時(shí)候，fold類被移除，然后元素消失。

為此，我去了解了一下vue的transition標(biāo)簽的一些內(nèi)部原理。具體內(nèi)容參見我這篇文章——關(guān)于transition過渡動(dòng)畫的收獲；

簡(jiǎn)單說，就是我們要利用一個(gè)比較冷門的監(jiān)聽事件animationend來監(jiān)聽動(dòng)畫是何時(shí)執(zhí)行完畢的，然后再做下一步的處理。

小DEMO

根據(jù)這個(gè)思路，我們便可以寫出一個(gè)小DEMO。代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>全原生樣式的下拉框</title>
</head>
<style>
  html,
  body {
    margin: 0;
  }

  html{
    --arrowSize: 8px;
  }

  div, ul {
    box-sizing: border-box;
  }

  html, body {
    width: 100%;
    height: 100%;
    background-color: #0B2550;
    overflow: hidden;
  }

  #app {
    width: 1000px;
    height: 500px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border: 1px solid white;
    position: relative;
    margin: 100px auto;
    background-color: #0B2550;
  }

  .selection-wrapper{
    position: relative;
    width: 250px;
    height: 50px;
    color: white;
    margin: 20px auto;
    font-size: 30px;
    font-family: 華文楷體;
    /*border: 1px solid #799cdc;*/
    border-radius: 10px;
  }

  .displayText-box{
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
  }

  .displayText{
    user-select: none;
  }

  .arrow-icon{
    position: absolute;
    top: 22px;
    right: 10px;
    width: 16px;
    height: 8px;
    line-height: initial;
    font-size: 0;
    transition: transform 0.3s ease;
  }

  .options-ul{
    display: none;
    width: 100%;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 60px;
    left: 0;
    border: 2px solid #BDF0FF;
  }

  .option{
    list-style: none;
    text-align: center;
    line-height: 40px;
    cursor: default;
  }

  .expand {
    transform-origin: top;
    animation: expand 0.3s ease both;
  }

  .fold {
    transform-origin: top;
    animation: fold 0.3s ease both;
  }

  /* 展開 */
  @keyframes expand {
    from {
      transform: scaleY(0);
    }
    to {
      transform: scaleY(1);
    }
  }

  /* 折疊 */
  @keyframes fold {
    from {
      transform: scaleY(1);
    }
    to {
      transform: scaleY(0);
    }
  }
</style>
<body>
  <div id="app">
    <h1 style="text-align: center;color: white;font-family: 華文楷體">選擇你想要的五星武器</h1>
    <div class="selection-wrapper">
      <div class="displayText-box">
        <div class="displayText">請(qǐng)選擇</div>
        <div class="arrow-icon">
          <svg viewBox="0,0,16,8">
            <path d="M 0,0 L 16,0 L 8,8 Z" fill="#31A1EF"></path>
          </svg>
        </div>
      </div>
      <ul class="options-ul expand">
        <li class="option">霧切之回光</li>
        <li class="option">飛雷之弦振</li>
        <li class="option">薙草之稻光</li>
        <li class="option">波亂月白經(jīng)津</li>
      </ul>
    </div>
  </div>
</body>
<script>
  const selection = document.querySelector('.displayText-box');
  const ul = document.querySelector('.options-ul');
  const arrow = document.querySelector('.arrow-icon');
  selection.addEventListener('click',function (e){
    let isExpand = ul.style.display === 'block';
    if(isExpand){
      // 折疊
      ul.classList.add('fold');
      arrow.style.transform = 'rotate(0deg)'
      ul.onanimationend = function (){
        ul.classList.remove('fold');
        ul.style.display = 'none';
      }
    } else {
      // 展開
      ul.style.display = 'block';
      ul.classList.add('expand');
      arrow.style.transform = 'rotate(180deg)'
      ul.onanimationend = function (){
        ul.classList.remove('expand');
      }
    }
  })
</script>
</html>

效果如下：

結(jié)語(yǔ)

這個(gè)DEMO就是一個(gè)最簡(jiǎn)單的退場(chǎng)動(dòng)畫的實(shí)現(xiàn)方式，即在animationend事件中使目標(biāo)元素消失。當(dāng)我們清楚原生的js是怎么寫的，那么在非vue環(huán)境中，我們也可以自由自在的添加各種各樣的退場(chǎng)動(dòng)畫了。不過，有能力的小伙伴可能就直接去看vue的transition的源碼去了，而我這篇文章就是獻(xiàn)給像我一樣不想去看源碼但是還想知道一些旁門左道的知識(shí)的小伙伴。

到此這篇關(guān)于使用原生JS添加進(jìn)場(chǎng)和退場(chǎng)動(dòng)畫詳解的文章就介紹到這了,更多相關(guān)JS進(jìn)場(chǎng) 退場(chǎng)動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: