js实现渐隐渐现

实现渐隐渐现的方法

使用JavaScript实现渐隐渐现效果可以通过操作CSS的opacity属性或结合CSS动画完成。以下是几种常见实现方式：

通过修改opacity属性

直接操作元素的opacity值，配合transition实现平滑过渡效果：

const element = document.getElementById('target');

// 渐现
function fadeIn() {
  element.style.opacity = '0';
  element.style.transition = 'opacity 1s ease-in-out';
  setTimeout(() => { element.style.opacity = '1'; }, 10);
}

// 渐隐
function fadeOut() {
  element.style.opacity = '1';
  element.style.transition = 'opacity 1s ease-in-out';
  setTimeout(() => { element.style.opacity = '0'; }, 10);
}

使用CSS动画

通过添加/移除CSS类名触发预定义的动画：

.fade-in {
  animation: fadeIn 1s forwards;
}
.fade-out {
  animation: fadeOut 1s forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

const element = document.getElementById('target');

function fadeIn() {
  element.classList.remove('fade-out');
  element.classList.add('fade-in');
}

function fadeOut() {
  element.classList.remove('fade-in');
  element.classList.add('fade-out');
}

使用requestAnimationFrame

手动控制动画帧实现更精细的控制：

function fade(element, targetOpacity, duration = 1000) {
  const startTime = performance.now();
  const startOpacity = parseFloat(getComputedStyle(element).opacity);

  function updateOpacity(timestamp) {
    const elapsed = timestamp - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const currentOpacity = startOpacity + (targetOpacity - startOpacity) * progress;
    element.style.opacity = currentOpacity;

    if (progress < 1) {
      requestAnimationFrame(updateOpacity);
    }
  }

  requestAnimationFrame(updateOpacity);
}

// 使用示例
fade(document.getElementById('target'), 0); // 渐隐
fade(document.getElementById('target'), 1); // 渐现

注意事项

• 渐隐后如需隐藏元素，需监听transitionend事件或设置回调
• 对于需要频繁触发的动画，建议使用CSS动画以获得更好的性能
• 现代项目可考虑使用CSS变量或Web Animations API实现更复杂效果