dom元素+CSS实现阶梯动画效果

本文主要是介绍dom元素+CSS实现阶梯动画效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.效果

2.代码实现

<template><div class="container"><div class="Box"><div class="box" style="background-color: red;"></div><div class="box" style="background-color: orange;"></div><div class="box" style="background-color: yellow;"></div><div class="box" style="background-color: green;"></div><div class="box" style="background-color: skyblue;"></div><div class="box" style="background-color: blue;"></div></div></div>
</template>
<script>export default {mounted () {this.setActions()},methods: {setActions () {//选中所有盒子const arr = document.querySelectorAll('.box')//循环添加事件监听arr.forEach(e => {e.addEventListener('mouseenter', () => {//通过添加类名实现盒子上移e.classList.add('boxMoveTwoStep')//判断前后的兄弟节点是否存在if (e.previousElementSibling) {//上一个节点e.previousElementSibling.classList.add('boxMoveOneStep')}if (e.nextElementSibling) {//下一个节点e.nextElementSibling.classList.add('boxMoveOneStep')}})//鼠标移除恢复盒子位置e.addEventListener('mouseleave', () => {e.classList.remove('boxMoveTwoStep')if (e.previousElementSibling) {e.previousElementSibling.classList.remove('boxMoveOneStep')}if (e.nextElementSibling) {e.nextElementSibling.classList.remove('boxMoveOneStep')}})})}}
}
</script>
<style lang='scss' scoped>
.container {width: 100%;height: 100%;overflow-y: hidden;position: relative;.Box {position: absolute;bottom: -50px;width: 100%;height: 100px;}.box {width: 50px;height: 100px;display: inline-block;background-color: pink;transition: 0.3s;}
}.boxMoveOneStep {transform: translate(0px, -30px);
}.boxMoveTwoStep {transform: translate(0px, -50px);
}
</style>