点击复选框时如何同时触发CSS动画与Url.Action执行

有可行方案，核心需要解决的问题是：如果直接触发页面跳转，页面会立即卸载导致动画来不及渲染播放，结合你是下载资源的业务场景，有两种成熟实现方式：

方案1：不跳转页面实现下载（更推荐，可完整播放动画） #

下载资源不需要整页跳转，用这种方式可以同时触发动画和下载，完全不冲突：

步骤1：修正原有HTML代码，移除错误的内联点击事件 #

<div style="zoom: 0.2">
<div class="container-fluid">
    <div class="row">
        <div id="ms-container">
            <label for="ms-download">
                <div class="ms-content">
                    <div class="ms-content-inside">
                        <!-- 移除内联onclick，删除Url.Action里多余的class参数 -->
                        <input type="checkbox" id="ms-download" />
                            <div class="ms-line-down-container">
                                <div class="ms-line-down"></div>
                            </div>
                        <div class="ms-line-point"></div>
                    </div>
                </div>
            </label>
        </div>
    </div>
</div>
</div>

步骤2：绑定CSS动画触发规则 #

给需要做动画的元素绑定active类对应的动画效果，示例如下：

/* 示例动画：点击后掉落效果，可替换为你自己需要的动画 */
.ms-content-inside.active .ms-line-down {
  animation: dropDown 0.8s ease forwards;
}
@keyframes dropDown {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(30px); opacity: 0; }
}

步骤3：添加JS逻辑同时触发动画和下载 #

document.getElementById('ms-download').addEventListener('click', function() {
  const animateElement = document.querySelector('.ms-content-inside');
  // 先加类触发CSS动画
  animateElement.classList.add('active');
  // 生成下载链接
  const downloadUrl = '@Url.Action("DownloadDirectory", "Home")';
  // 创建隐藏a标签触发下载，不跳转页面
  const a = document.createElement('a');
  a.href = downloadUrl;
  a.download = ''; // 留空则使用后端返回的文件名
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  // 动画结束后重置状态
  setTimeout(() => {
    animateElement.classList.remove('active');
    this.checked = false;
  }, 800) // 时间和动画时长保持一致
})

方案2：确实需要整页跳转的场景 #

如果你的业务逻辑必须跳转页面，就延迟跳转时间，等动画播放完成后再执行跳转：

document.getElementById('ms-download').addEventListener('click', function() {
  const animateElement = document.querySelector('.ms-content-inside');
  // 触发动画
  animateElement.classList.add('active');
  // 延迟跳转，时间和你的CSS动画时长保持一致，比如动画是0.8s就设800
  setTimeout(() => {
    window.location.href = '@Url.Action("DownloadDirectory", "Home")';
  }, 800)
})

原有代码问题修正 #

你之前的代码里Url.Action的参数写法有误：new { @class = "btn btn-success} 是给HTML标签加类的参数，放到Url.Action里是无效的，而且缺少闭合引号，按上面的示例删除这个多余参数即可。

内容的提问来源于stack exchange，提问作者Kris