在js盒css里面,通过事件触发一个盒子从上到下过渡3秒移动100px,在过渡的时间里面,开始隐藏,第一次结束显示固定,再次触发需要等待上次结束,
时间: 2024-04-10 08:27:31 浏览: 6
你可以使用CSS的`transition`属性和JavaScript的事件来实现这个效果。首先,创建一个HTML元素作为你的盒子,并为其添加样式和事件监听器。下面是一个实现的示例代码:
HTML:
```html
<div id="box"></div>
<button onclick="moveBox()">触发移动</button>
```
CSS:
```css
#box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
transition: top 3s ease-in-out, opacity 0s linear 3s;
}
.hidden {
opacity: 0;
}
.visible {
opacity: 1;
}
.moving {
top: 100px;
}
```
JavaScript:
```javascript
function moveBox() {
var box = document.getElementById('box');
if (!box.classList.contains('moving')) {
box.classList.remove('visible');
box.classList.add('hidden');
void box.offsetWidth; // 强制重绘,使得上面的样式生效
box.classList.add('moving');
setTimeout(function() {
box.classList.remove('hidden');
box.classList.remove('moving');
box.classList.add('visible');
}, 3000);
}
}
```
在这个示例中,我们通过CSS的过渡属性设置了盒子从上到下的过渡效果,并使用了`opacity`来控制盒子的显示和隐藏。通过JavaScript的`setTimeout`函数,我们在3秒后移除了隐藏的类,并添加了显示的类,以实现固定显示的效果。在每次触发移动前,我们还检查盒子是否正在移动中,以避免重复触发动画。