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 则适合更复杂的动画需求。
