原生JS下拉菜单动画（上下双向)
2021-12-08 本文已影响0人
拎包哥
手写下拉菜单，惊爆面试官的钛合金狗眼。
slide.gif
- animation和@keyframes的组合。
- translateY里百分比%的运用，适配下拉菜单的高度。
U•ェ•*U
<html>
<div class="box mClick" onclick="mClick()">点击</div>
<div class="box" id="box">菜单</div>
</html>
<script>
this.slide = false
function mClick() {
var box = document.getElementById('box')
this.slide = !slide
var way,percent
if (this.slide) {
way = 'down'
per = 100
}else {
way = 'up'
per = 0
}
box.style = `animation:${way} .5s;transform:translateY(${per}%);`
}
</script>
<style>
@keyframes down {
from {
transform: translateY(0%);
}
to {
transform: translateY(100%);
}
}
@keyframes up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0%);
}
}
.box {
position: fixed;
height: 100px;
width: 100px;
border: 1px solid black;
}
.mClick {
background-color: white;
z-index: 1;
}
</style>
关注我，日更1个教程里没有的前端小知识点。
动动你发财的小手，给拎包哥点个赞吧！
