简单的Javascript按钮点击动画(完成时带有回调)

简单的Javascript按钮点击动画是一种通过Javascript代码实现的交互效果，用于增强用户体验和提升页面的视觉效果。它可以在按钮被点击时触发动画效果，并在动画完成后执行回调函数。

这种动画效果可以通过CSS3的过渡（transition）和变换（transform）属性来实现。以下是一个完整的实现示例：

HTML代码：

<button id="myButton">点击我</button>

CSS代码：

#myButton {
  width: 100px;
  height: 40px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#myButton:hover {
  background-color: #0056b3;
}

Javascript代码：

var button = document.getElementById("myButton");

button.addEventListener("click", function() {
  // 添加点击动画效果
  button.style.transform = "scale(0.9)";
  
  // 动画完成后执行回调函数
  setTimeout(function() {
    button.style.transform = "scale(1)";
    // 在这里执行回调函数的代码
    console.log("动画完成");
  }, 300);
});

在上述代码中，我们首先通过CSS设置了按钮的样式，包括背景颜色、大小等。然后使用Javascript代码获取按钮元素，并为其添加了一个点击事件监听器。当按钮被点击时，通过修改按钮的transform属性实现了一个缩放动画效果。在动画完成后，通过setTimeout函数设置了一个延迟执行的回调函数，用于在动画完成后执行一些额外的操作。

这种简单的按钮点击动画可以应用于各种网页中，例如表单提交按钮、导航菜单等，以提升用户体验和页面交互效果。

腾讯云相关产品和产品介绍链接地址：