用css+js 实现在点击按钮之前动画没开始 点击按钮之后动画才开始
时间: 2023-08-23 10:06:48 浏览: 44
可以通过JavaScript来实现这个效果。首先,给需要执行动画的元素添加一个CSS类,这个类包含动画的CSS属性和动画时间等信息。然后,在点击按钮时,使用JavaScript动态地给这个元素添加该CSS类,触发动画的执行。下面是一个示例代码:
HTML部分:
```
<button id="myButton">开始动画</button>
<div id="myDiv"></div>
```
CSS部分:
```
#myDiv {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: all 1s ease-out;
}
#myDiv.animate {
transform: translate(-50%, -50%) scale(1.5);
}
```
JavaScript部分:
```
var button = document.getElementById('myButton');
var div = document.getElementById('myDiv');
button.onclick = function() {
div.classList.add('animate');
};
```
在这个例子中,当点击按钮时,JavaScript会为`myDiv`元素添加`animate`类,从而触发CSS中定义的动画效果。如果在按钮点击之前,`myDiv`元素没有`animate`类,则不会执行动画效果。