单击正向动画单击反向动画

Question

我可以启动一个 css 动画 onclick 然后在再次单击时反转它吗？

我只是想让它在两种状态之间切换。我该怎么做？

我需要使用 JavaScript 吗？

Answer 1

你绝对可以做到这一点。就我个人而言，我认为使用 JavaScript 最简单，但还有其他解决方法。尽管 JS 可能非常丑陋，但它的优点之一是可以使用闭包。闭包允许函数在超出范围后保持变量的状态。这可以让您保留变量的状态以用于跟踪目的，例如检查该元素之前是否被单击过。

你的问题没有显示任何代码，所以我不完全确定你是如何在 CSS 中编写你的动画的，但我们假设你正在使用 CSS3 中声明的过渡一些 classes。此外，我的示例将使用 jQuery，因为我发现它更易于使用。

假设我们在名为 oddAnimation 的 class 中声明了一个过渡或动画，在另一个名为 evenAnimation 的 class 中声明了相反的 transition/animation ].此外，我们要添加 onclick 处理程序的元素将具有 "mybutton".

的 ID

$(document).ready(function() {
    var clicked = false;

    $('#mybutton').click(function() {
        if(clicked) {
            clicked = false;
            $(this).removeClass('oddAnimation').addClass('evenAnimation');
        }
        else {
            clicked = true;
            $(this).removeClass('evenAnimation').addClass('oddAnimation');
        }
     });
});

此代码为 ID 为 "mybutton" 的元素创建一个 onclick 处理程序和一个名为 clicked 的用于跟踪的变量，我们将在每次处理程序的回调为运行时切换该变量。此处理程序还将更改该元素上的 classes 以在单击时激活正确的 transitions/animations。

请记住，这一切都假设所有内容都已在 class 中的 CSS 中进行了设置。还有其他方法可以仅使用 JavaScript（不使用 CSS animations/transitions）或以不同的方式激活动画，但这种方法可能对您有用。

单击正向动画单击反向动画

Forward animation on click Reverse animation on click

javascript

css

css-animations

单击正向动画 单击反向动画

Forward animation on click Reverse animation on click

javascript

css

css-animations

单击正向动画单击反向动画