js 实现 伸缩

使用 CSS Transition 实现伸缩效果

通过 CSS 的 transition 属性和 JavaScript 操作元素的 class 或样式，可以实现平滑的伸缩动画效果。

const element = document.getElementById('target');
element.addEventListener('click', () => {
  element.classList.toggle('expanded');
});

#target {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: all 0.3s ease;
}

#target.expanded {
  width: 200px;
  height: 200px;
}

使用 CSS Animation 实现伸缩效果

通过定义关键帧动画，可以实现更复杂的伸缩效果。

const element = document.getElementById('target');
element.addEventListener('click', () => {
  element.style.animation = 'scale 1s forwards';
});

@keyframes scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

#target {
  width: 100px;
  height: 100px;
  background-color: red;
}

使用 JavaScript 直接操作样式

通过 JavaScript 直接修改元素的样式属性，结合定时器实现伸缩效果。

const element = document.getElementById('target');
let isExpanded = false;

element.addEventListener('click', () => {
  const targetWidth = isExpanded ? 100 : 200;
  const targetHeight = isExpanded ? 100 : 200;

  let currentWidth = parseInt(element.style.width) || 100;
  let currentHeight = parseInt(element.style.height) || 100;

  const interval = setInterval(() => {
    if (isExpanded ? currentWidth <= 100 : currentWidth >= 200) {
      clearInterval(interval);
      isExpanded = !isExpanded;
      return;
    }

    currentWidth += isExpanded ? -5 : 5;
    currentHeight += isExpanded ? -5 : 5;

    element.style.width = `${currentWidth}px`;
    element.style.height = `${currentHeight}px`;
  }, 16);
});

使用 Web Animations API

现代浏览器支持 Web Animations API，提供了更强大的动画控制能力。

const element = document.getElementById('target');
element.addEventListener('click', () => {
  element.animate([
    { transform: 'scale(1)' },
    { transform: 'scale(1.5)' },
    { transform: 'scale(1)' }
  ], {
    duration: 1000,
    iterations: 1
  });
});

使用 GSAP 库实现高级伸缩动画

GSAP 是一个强大的 JavaScript 动画库，可以实现复杂的伸缩效果。

gsap.to("#target", {
  scale: 1.5,
  duration: 0.5,
  yoyo: true,
  repeat: 1
});

以上方法提供了从简单到复杂的多种实现方式，可以根据项目需求选择最适合的方案。CSS Transition 适合简单的状态切换，Web Animations API 和 GSAP 则适合更复杂的动画需求。