时间戳

首页 > 解决方案 > 我需要同时执行一个 css 动画和一个 Url.Action

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

问题描述

正如我上面提到的，我需要知道是否有一个选项可以同时执行“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>

标签： javascripthtmljquerycssasp.net-mvc

解决方案

当使用 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')
  }
}

推荐阅读