我需要同时执行一个css动画和一个Url.Action答案

【问题标题】：I need to execute a css animation and a Url.Action at the same time我需要同时执行一个css动画和一个Url.Action
【发布时间】：2021-11-20 13:05:10
【问题描述】：

如上所述，我想知道是否有一个选项可以同时执行“Url.Action”和 CSS 动画？

<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">
                        <input type="checkbox" id="ms-download" 
                         onclick="location.href='@Url.Action("DownloadDirectory", "Home", new 
                         { @class = "btn btn-success}, null)';return false;" />
                            <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>

【问题讨论】：

Html.Action() 只是返回一个资源的字符串 URL - 你的意思是当你点击一个链接时你想显示一个动画？此外，您的代码中没有对Html.Action() 的引用...？您的问题目前尚不清楚。
对不起，我的意思是“Url.Action”而不是“Html.Action”
别担心，我的评论仍然适用。
我想在执行“Url.Action()”-Method时显示一个动画
如果你点击一个链接去一个新页面（通过一个a元素和src使用Url.Action()调用设置），那么页面将被卸载，所以你不能运行任何动画。

标签： javascript html jquery css asp.net-mvc

【解决方案1】：

您可以在使用 jQuery 选中复选框时向元素添加 CSS 动画。您的 HTML onClick 将运行，JS 函数将与它一起运行，根据是否选中复选框，将动画类添加和删除到您想要的任何元素。

function doAnimation(){
  //if the box is checked
  if ($('#ms-download').prop('checked')){
    //add the class with the animation
    $('#whateverElement').addClass('class-with-animation')
    //if unchecked, remove animation class
  } else {
    $('#whateverElement').removeClass('class-with-animation')
  }
}

使用原生 JavaScript：

function doAnimation(){
  //if the box is checked
  if (document.getElementById('ms-download').checked){
    //add the class with the animation
    document.querySelector('whateverElement').classList.add('class-with-animation')
    //if unchecked, remove animation class
  } else {
    document.querySelector('whateverElement').classList.remove('class-with-animation')
  }
}

【讨论】：