水果网站系统的建设与实现,中国万网icp网站备案专题,wordpress如何增加page样式,g3云推广官网效果图 只是一个简单的演示demo#xff0c;但是可以后面可以优化样式啥的 刚开始元素的display为none#xff0c;然后#xff0c;为了给元素展示时添加一个动画#xff0c;首先要添加样式类名show#xff0c;让它覆盖display:none#xff0c;变得可见。然后#xff0c;添… 效果图 只是一个简单的演示demo但是可以后面可以优化样式啥的 刚开始元素的display为none然后为了给元素展示时添加一个动画首先要添加样式类名show让它覆盖display:none变得可见。然后添加元素放大的动画样式类名隐藏的时候也需要有动画并且动画结束完成之后元素的display应当恢复成原来的none也就是变得不可见。因此需要监听动画完成事件。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* body占满整个页面 */body {margin: 0;height: 100vh;}/* 设置box1默认大小以及设置 display:none让它一开始就不被看见 */.box1 {width: 400px;height: 200px;background-color: #bfa;margin: 10px auto;display: none;}/* 定义元素放大的动画 */keyframes scaleup {0% {transform: scale(0)}100% {transform: scale(1)}}/* 定义元素放大的类 */.scaleup {animation: scaleup 0.5s;}/* 元素如果要显示, 必须通过添加该类的方式(约定) */.show {display: block;}/* 元素缩小的动画 */keyframes scaledown {0% {transform: scale(1)}100% {transform: scale(0)}}/* 定义元素缩小的类 */.scaledown {animation: scaledown 0.5s;}/stylescriptwindow.onload () {let box1 document.querySelector(.box1)let openBtn document.querySelector(.open)let closeBtn document.querySelector(.close)openBtn.onclick () {if(box1.show) {/* 用于标记box1是否被打开过, 如果之前被打开过的话, 再次点击打开无效 */return }box1.show true /* 标记打开过 */box1.classList.add(show) /* 添加让元素显示的类 */box1.classList.add(scaleup)/* 添加元素显示时的动画 */let callback () {box1.classList.remove(scaleup) /* 动画完成后, 移除放大动画的类为什么要移除呢动画播放结束这个类也就没用了并且让下次可以继续指定放大的动画的样式类,来展示动画 */box1.removeEventListener(animationend,callback) /* 动画完成后, 移除监听 */}box1.addEventListener(animationend, callback) /* 动画完成后, 执行指定的函数 */}closeBtn.onclick () {if(!box1.show) {return}box1.classList.add(scaledown) /* 关闭时, 指定缩小的动画的样式类 *//* 缩小动画结束后, 应当要把这个框给隐藏掉, 就是把box1的display恢复成原来的none */let callback () {box1.classList.remove(show) /* 把show样式类去掉就会用到box1类中的display:none了 */box1.classList.remove(scaledown) /* 跟上面的解释一样 */box1.removeEventListener(animationend,callback) /* 动画完成后, 移除监听 */box1.show false}box1.addEventListener(animationend, callback) /* 动画完成后, 执行指定的函数 */}}/script
/head
bodydiv classcontainerdiv classbox1 scaleup/div/divhr/button classopenopen/buttonbutton classcloseclose/button
/body
/html
