2. 考试要求: 1.给按钮绑定点击事件 2.点击后,给class=box的div增加动画,使div在2000毫秒内,宽度变成400px,高度变成300px
时间: 2024-01-22 18:19:31 浏览: 88
Vuejs第七篇之Vuejs过渡动画案例全面解析
好的,你可以参考下面的代码实现:
HTML代码:
```html
<button id="btn">点击按钮</button>
<div class="box"></div>
```
JS代码:
```javascript
const btn = document.getElementById('btn');
const box = document.querySelector('.box');
btn.addEventListener('click', function() {
box.style.transition = 'all 2s ease';
box.style.width = '400px';
box.style.height = '300px';
});
```
当按钮被点击时,我们给 `class=box` 的 div 元素增加了一个过渡效果,即在 2 秒内执行宽度和高度的变化,实现了动画效果。
阅读全文