Question

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

我只想让它在这两种状态之间切换。我怎么能这样做？

我需要使用JavaScript吗？

Answer 1

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

您的问题没有显示任何代码，因此我不完全确定您在CSS中编写动画的方式，但我们假设您正在使用在某些类中声明的CSS3过渡。另外，我的例子是使用jQuery，因为我发现它更容易使用。

我们假设我们在名为oddAnimation的类中声明了转换或动画，并在另一个名为evenAnimation的类中反转了该转换/动画。此外，我们要添加onclick处理程序的元素的ID为＆＃34; mybutton＆＃34;。

$(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为＆＃34; mybutton＆＃34;的元素创建一个onclick处理程序。和一个用于跟踪命名的变量clicked我们将在每次运行处理程序的回调时切换。此处理程序还将更改该元素上的类，以便在单击时激活正确的过渡/动画。

请记住，这一切都假设所有内容都在CSS中的类中设置。还有其他方法可以仅使用JavaScript（并且没有CSS动画/过渡）或以不同方式激活动画，但是这种方法可能适合您。

单击时转发动画单击反转动画

1 个答案: