使用原生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进场 退场动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
JavaScript原生对象之Number对象的属性和方法详解
这篇文章主要介绍了JavaScript原生对象之Number对象的属性和方法详解,本文讲解了创建 Number 对象的语法、MAX_VALUE、MIN_VALUE、NaN等属性或方法,需要的朋友可以参考下2015-03-03BootstrapValidator验证用户名已存在(ajax)
这篇文章主要为大家详细介绍了BootstrapValidator验证用户名已存在,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2019-11-11学习javascript面向对象 理解javascript原型和原型链
这篇文章主要介绍了javascript原型和原型链,学习javascript面向对象,感兴趣的小伙伴们可以参考一下2016-01-01微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
这篇文章主要介绍了微信小程序scroll-view左侧导航栏点餐功能实现,点击种类,滚动到锚点;滚动到锚点,种类选中,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-06获取元素距离浏览器周边的位置的方法getBoundingClientRect
本文为大家介绍下如何使用getBoundingClientRect()方法获取元素距离浏览器周边的位置,有类似问题的朋友可以参考下哈,希望对你学习js有所帮助2013-04-04使用Chrome调试JavaScript的断点设置和调试技巧
这篇文章主要介绍了使用Chrome调试JavaScript的断点设置和调试技巧,需要的朋友可以参考下2014-12-12
最新评论