javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS进场 退场动画

使用原生JS添加进场和退场动画详解

作者：吴小远

总所周知啊，身为一个合格的前端搬砖工，会编写并且添加一些基础的动画效果可谓是比较基础且轻车熟路的技能了。本文将教大家如何使用原生JS添加进场和退场动画，感兴趣的可以了解一下

前言

总所周知啊，身为一个合格的前端搬砖工，会编写并且添加一些基础的动画效果可谓是比较基础且轻车熟路的技能了。但是据我所见，大部分的前端程序员其实只会添加进场动画，而不知道如何添加退场动画。使用方式，也是简单粗暴的添加一个css类。

比如下面这种情况，增加一个下拉选项的展开动画。我们会先准备好keyframe关键帧和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);
    }
}

使用的时候，就直接把这个类添加到目标元素上面，呈现出来的效果就像这样：

诚然，这样已经基本上能够满足目前的绝大部分业务需求了，而且，绝大部分的客户也不会注意到这个退场有没有动画。但是，我作为一个比较喜欢钻牛角尖的人，就特别想知道退场动画到底是怎么实现。不过，由于我入行没有多久，就赶上了vue普及开来了的潮流，让我一下子丧失了找寻这个问题答案的兴趣。

vue中的transition标签

自从工作中开始使用了vue这个框架之后，妈妈再也不用担心我不会添加退场动画了。在vue中，添加进场和退场动画都变得非常的容易，只需要像下面这样就行：

<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">波乱月白经津</li>
    </ul>
</transition>

再后来，等我可以比较熟练的应对项目上的问题的时候，我终于有闲情逸致可以探究一下究竟是怎么回事了。点开DevTools，我发现在入场动画刚开始执行的时候，目标元素上面会被添加上expand类，但是等到执行完毕的时候，expand就被移除了。而执行退场动画的时候，fold类会被添加到目标元素上，等到退场动画结束的时候，fold类被移除，然后元素消失。

为此，我去了解了一下vue的transition标签的一些内部原理。具体内容参见我这篇文章——关于transition过渡动画的收获；

简单说，就是我们要利用一个比较冷门的监听事件animationend来监听动画是何时执行完毕的，然后再做下一步的处理。

小DEMO

根据这个思路，我们便可以写出一个小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">请选择</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">波乱月白经津</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>

效果如下：

结语

这个DEMO就是一个最简单的退场动画的实现方式，即在animationend事件中使目标元素消失。当我们清楚原生的js是怎么写的，那么在非vue环境中，我们也可以自由自在的添加各种各样的退场动画了。不过，有能力的小伙伴可能就直接去看vue的transition的源码去了，而我这篇文章就是献给像我一样不想去看源码但是还想知道一些旁门左道的知识的小伙伴。

到此这篇关于使用原生JS添加进场和退场动画详解的文章就介绍到这了,更多相关JS进场 退场动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文