JavaScript控制CSS动画：实现移动端文本复制提示与动画重置技巧-js教程-PHP中文网

JavaScript控制CSS动画：实现移动端文本复制提示与动画重置技巧

本教程将深入探讨如何使用javascript精确控制css动画，以实现如文本复制成功后的提示信息显示与自动隐藏效果。我们将重点解决动画无法二次触发的问题，并提供针对移动端兼容性的最佳实践，通过基于css类和事件监听的方案，确保动画流畅且可重复执行。

在现代Web开发中，通过JavaScript触发和管理CSS动画是实现丰富用户体验的常见需求。例如，当用户点击按钮复制文本后，我们可能希望弹出一个短暂的“已复制”提示，并在几秒后自动消失。然而，在实际操作中，开发者常会遇到动画无法重复触发或在移动设备上表现异常的问题。本教程将提供一套健壮的解决方案，确保动画的可靠性和跨平台兼容性。

1. 文本复制功能实现

首先，我们来实现文本复制的基础功能。这通常涉及获取目标文本、调用navigator.clipboard.writeText API，并对移动设备进行兼容性处理。

function copyTextAndShowAlert() {
  // 1. 获取要复制的文本内容
  const copyInput = document.querySelector(".offer-right__coupon input");
  if (!copyInput) {
    console.error("未找到复制源输入框。");
    return;
  }

  copyInput.select();
  // 针对移动设备，确保文本被完全选中
  copyInput.setSelectionRange(0, 99999); 

  // 2. 使用 Clipboard API 复制文本
  navigator.clipboard.writeText(copyInput.value)
    .then(() => {
      console.log("文本已成功复制到剪贴板。");
      // 复制成功后，触发提示动画
      showAlertAnimation();
    })
    .catch(err => {
      console.error("复制文本失败: ", err);
      // 可以添加错误提示
    });
}

登录后复制

2. CSS动画的定义

接下来，我们定义提示信息（例如“复制成功”）的CSS样式和动画。为了实现“显示后隐藏”的效果，我们需要一个初始状态（隐藏）、一个显示状态（不透明度为1），以及一个从显示到隐藏的动画。

/* 提示信息的基础样式 */
.alert-coupon {
    opacity: 0; /* 默认隐藏 */
    visibility: hidden; /* 辅助隐藏，确保不占用空间或接收事件 */
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s; /* 初始显示过渡 */
    position: absolute; /* 根据实际布局调整 */
    /* 其他样式，如背景、颜色、字体等 */
}

/* 动画触发时添加的类 */
.alert-coupon.show-hide-animation {
    opacity: 1; /* 立即显示 */
    visibility: visible;
    animation: hideText 1s ease-in 2s forwards; /* 2秒延迟后执行隐藏动画 */
}

/* 隐藏动画的关键帧 */
@keyframes hideText {
  to {
    opacity: 0;
    visibility: hidden; /* 动画结束时彻底隐藏 */
  }
}

/* 针对旧版WebKit浏览器（如部分移动端浏览器）的兼容性前缀 */
@-webkit-keyframes hideText {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

登录后复制

注意事项：

立即学习“Java免费学习笔记（深入）”；

animation-fill-mode: forwards 是关键，它能让动画结束后元素保持动画最后一帧的样式。
visibility: hidden 配合 opacity: 0 可以提供更好的隐藏效果，确保元素不参与布局且不可交互。
transition 用于初始显示时平滑过渡，而animation用于延迟隐藏。

3. 解决动画无法二次触发的问题

直接通过element.style.animation = "..."来设置动画属性，在动画结束后，浏览器可能不会认为需要重新执行相同的动画，即使你再次设置它。解决此问题的最佳实践是：通过JavaScript动态添加和移除一个CSS类。

萌动AI

CreateAI旗下AI动漫视频生成平台

438

查看详情

当需要触发动画时，添加一个预定义了动画的CSS类。当动画结束后，移除这个类，以便下次可以再次添加它来重新触发动画。我们可以监听animationend事件来知道动画何时结束。

function showAlertAnimation() {
  const textWasCopiedElement = document.querySelector(".offer-right__main .alert-coupon");
  if (!textWasCopiedElement) {
    console.error("未找到提示信息元素。");
    return;
  }

  // 1. 确保在开始新动画前，移除可能存在的旧动画类
  // 这一步很重要，尤其是在动画可能被中断或多次触发的情况下
  textWasCopiedElement.classList.remove("show-hide-animation");

  // 强制浏览器重绘/重新计算样式，以确保动画能够重新触发
  // 这是一个常见的hack，通过访问元素的某个属性来强制浏览器刷新
  void textWasCopiedElement.offsetWidth; 

  // 2. 添加类来触发动画
  textWasCopiedElement.classList.add("show-hide-animation");

  // 3. 监听动画结束事件，以便移除类，为下次触发做准备
  // 注意：hideText动画的持续时间是1s，延迟是2s，所以总时长是3s。
  // animationend事件会在动画执行结束后触发。
  const animationDuration = 3000; // 动画总时长 (1s动画 + 2s延迟)

  // 使用 setTimeout 模拟 animationend，或者直接监听 animationend
  // 监听 animationend 更精确，但需要处理浏览器前缀和多次触发的问题
  // 这里我们使用 setTimeout 简化，确保在动画结束后移除类
  setTimeout(() => {
    textWasCopiedElement.classList.remove("show-hide-animation");
    // 动画结束后，可以考虑重置 opacity 和 visibility 到初始状态
    textWasCopiedElement.style.opacity = "0";
    textWasCopiedElement.style.visibility = "hidden";
  }, animationDuration);

  // 更严谨的 animationend 监听方式 (需要处理移除监听器)
  // const handleAnimationEnd = () => {
  //   textWasCopiedElement.classList.remove("show-hide-animation");
  //   textWasCopiedElement.removeEventListener('animationend', handleAnimationEnd);
  // };
  // textWasCopiedElement.addEventListener('animationend', handleAnimationEnd);
}

登录后复制

代码整合与示例HTML：

<style>
/* 提示信息的基础样式 */
.alert-coupon {
    opacity: 0; /* 默认隐藏 */
    visibility: hidden; /* 辅助隐藏，确保不占用空间或接收事件 */
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s; /* 初始显示过渡 */
    position: absolute; /* 根据实际布局调整 */
    top: 50%; /* 示例定位 */
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 1000;
    font-size: 14px;
    white-space: nowrap;
}

/* 动画触发时添加的类 */
.alert-coupon.show-hide-animation {
    opacity: 1; /* 立即显示 */
    visibility: visible;
    animation: hideText 1s ease-in 2s forwards; /* 2秒延迟后执行隐藏动画 */
    -webkit-animation: hideText 1s ease-in 2s forwards; /* WebKit 兼容 */
}

/* 隐藏动画的关键帧 */
@keyframes hideText {
  to {
    opacity: 0;
    visibility: hidden; /* 动画结束时彻底隐藏 */
  }
}

/* 针对旧版WebKit浏览器（如部分移动端浏览器）的兼容性前缀 */
@-webkit-keyframes hideText {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
</style>

<div class="offer-right__main">
  <div class="offer-right__coupon">
    <input type="text" value="PRIMEIRACOMPRA" readonly>
  </div>
  <button onclick="copyTextAndShowAlert()">复制优惠码</button>
  <div class="alert-coupon">复制成功！</div>
</div>

<script>
function copyTextAndShowAlert() {
  const copyInput = document.querySelector(".offer-right__coupon input");
  if (!copyInput) {
    console.error("未找到复制源输入框。");
    return;
  }

  copyInput.select();
  copyInput.setSelectionRange(0, 99999); // For mobile devices

  navigator.clipboard.writeText(copyInput.value)
    .then(() => {
      console.log("文本已成功复制到剪贴板。");
      showAlertAnimation();
    })
    .catch(err => {
      console.error("复制文本失败: ", err);
      // 可以添加错误提示
      alert("复制失败，请手动复制。");
    });
}

function showAlertAnimation() {
  const textWasCopiedElement = document.querySelector(".offer-right__main .alert-coupon");
  if (!textWasCopiedElement) {
    console.error("未找到提示信息元素。");
    return;
  }

  // 1. 确保在开始新动画前，移除可能存在的旧动画类
  textWasCopiedElement.classList.remove("show-hide-animation");

  // 强制浏览器重绘/重新计算样式，以确保动画能够重新触发
  // 这是一个常见的hack，通过访问元素的某个属性来强制浏览器刷新
  void textWasCopiedElement.offsetWidth; 

  // 2. 添加类来触发动画
  textWasCopiedElement.classList.add("show-hide-animation");

  // 3. 监听动画结束事件，以便移除类，为下次触发做准备
  // 动画总时长 = 动画持续时间 + 动画延迟时间 = 1s + 2s = 3s
  const animationTotalDuration = 3000; 

  setTimeout(() => {
    textWasCopiedElement.classList.remove("show-hide-animation");
    // 动画结束后，手动确保元素回到初始隐藏状态
    textWasCopiedElement.style.opacity = "0";
    textWasCopiedElement.style.visibility = "hidden";
  }, animationTotalDuration);
}
</script>

登录后复制

4. 移动端兼容性考量

原问题中提到移动端动画不工作，后又指出是缓存问题。但在实际开发中，移动端兼容性确实是需要关注的重点。

CSS前缀： 尽管现代浏览器对标准CSS属性的支持越来越好，但为了兼容旧版或特定移动端浏览器（如某些Android WebKit内核），为@keyframes和animation属性添加-webkit-前缀仍然是好习惯。通常，使用构建工具（如Webpack配合Autoprefixer）可以自动化这一过程。
animationend事件： animationend事件在不同浏览器中的支持和触发时机可能略有差异。如果遇到问题，可以考虑使用setTimeout来模拟动画结束，其时长应与CSS中定义的animation-duration和animation-delay之和匹配，如上述示例所示。
触摸事件与点击事件： 确保按钮的onclick事件在移动端能正常响应。现代移动浏览器通常会将触摸事件转换为点击事件，但偶尔也可能出现延迟或无响应的情况。
Viewport和缩放： 确保你的页面有正确的viewport设置，以防止移动端布局或动画出现意料之外的问题。