javascript - 单击正向动画 单击反向动画

Question

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

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

我需要使用 JavaScript 吗？

Answer 1

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

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

假设我们在名为 oddAnimation 的类中声明了一个过渡或动画，并在另一个名为 evenAnimation 的类中声明了该过渡/动画的反转。此外，我们要添加 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 的跟踪变量，我们将在每次运行处理程序的回调时切换该变量。此处理程序还将更改该元素上的类以在单击时激活正确的转换/动画。

请记住，这一切都假设所有内容都已在类中的 CSS 中设置。还有其他方法可以只使用 JavaScript(不使用 CSS 动画/过渡)或以不同方式激事件画，但这种方法可能会成功。