尝试使用marginTop在单击时同时为页面添加动画

element.addEventListener('click', function() {
  // 在这里编写动画效果的代码
});

element.addEventListener('click', function() {
  // 获取当前元素的marginTop值
  var currentMarginTop = parseInt(window.getComputedStyle(element).marginTop);

  // 设置动画的目标marginTop值
  var targetMarginTop = currentMarginTop + 100; // 假设增加100像素

  // 创建一个动画效果
  var animation = element.animate([
    { marginTop: currentMarginTop + 'px' },
    { marginTop: targetMarginTop + 'px' }
  ], {
    duration: 1000, // 动画持续时间为1秒
    easing: 'ease-in-out' // 缓动函数，可根据需求调整
  });

  // 在动画结束后，更新元素的marginTop值
  animation.onfinish = function() {
    element.style.marginTop = targetMarginTop + 'px';
  };
});