如何在按鈕的幫助下使用 html、css 和 javascript 重定向網頁

Question

如何在按鈕的幫助下使用 HTML、CSS 和 JavaScript 重定向網頁。此外，當我單擊按鈕時，我想要一個 CSS 效果。 CSS效果完成后，我想將一個網頁重定向到另一個網頁

我試圖在 CSS 效果后重定向網頁。

它僅適用於重定向，當我單擊重定向按鈕時不顯示 CSS 效果

<a>
    <div class="grid__item theme-1">
        <button class="action"></button>
        <button class="particles-button">Home</button>
    </div>
</a>

我想在單擊按鈕時 CSS 效果完成后重定向網頁

Answer 1

$(".particles-button").on("click",function(e){
e.preventDefault();

$(this).addClass("css_effect_class");

//set the time when your css effect completes
setTimeout(function(){ 
window.location.href="http://stackoverflow.com";
 }, 3000);
});

Answer 2

一旦您在按鈕上使用 css 設置過渡，動畫就可以在您將鼠標懸停后運行，因此通常您不需要在用戶單擊之前設置一些動畫。 我想你可以試試這個。 一旦動畫完成，這將觸發回來，因此您可以重定向頁面。

<style>
    .particles-button {
        transition-duration: 455ms;
        color: blue;
        font-size: 1.5rem;
        padding: 12px;
    }

    .particles-button.active {
        color: red;
        font-size: 2rem;
        padding: 12px;

    }
</style>
<html>
<header>
    <script src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
</header>
<a>
    <div class="grid__item theme-1">
        <button class="particles-button" onclick="this.classList.toggle('active')">Homes</button>
    </div>
</a>

</html>


<script>
    $(".particles-button").click(function () {
        $(this).one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
            function (event) {
                console.log("do your thing :D")
            });
    });
</script>

如何在按鈕的幫助下使用 html、css 和 javascript 重定向網頁

問題描述

2 個解決方案

解決方案1
2 2019-09-06 04:35:51

解決方案2
1 2019-09-06 04:45:28

如何在按鈕的幫助下使用 html、css 和 javascript 重定向網頁

問題描述

2 個解決方案

解決方案1 2 2019-09-06 04:35:51

解決方案2 1 2019-09-06 04:45:28

解決方案1
2 2019-09-06 04:35:51

解決方案2
1 2019-09-06 04:45:28