单击时正向动画单击时反向动画答案

【问题标题】：Forward animation on click Reverse animation on click单击时正向动画单击时反向动画
【发布时间】：2015-11-05 03:51:26
【问题描述】：

我可以开始一个css动画onclick，然后再次点击时反转它吗？

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

我需要使用 JavaScript 吗？

【问题讨论】：

是的，你可以做到。您可能需要考虑使用 jQuery 来实现。
@AltayMazlum I'll just leave this here...
@JNYRanger 我没听懂。
@AltayMazlum 虽然我承认我确实问过“我可以...”，但我寻找的不仅仅是“是的，你可以做到”。
使用复选框，不用JS也可以做css动画。 stackoverflow.com/questions/21322626/…

标签： javascript css css-animations

【解决方案1】：

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

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

假设我们在一个名为oddAnimation 的类中声明了一个过渡或动画，而在另一个名为evenAnimation 的类中声明了该过渡/动画的反向。此外，我们要添加 onclick 处理程序的元素的 id 为“mybutton”。

$(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 动画/过渡）或以不同的方式激活动画，但这种方法可能会为您解决问题。

【讨论】：

不需要，@abhijith 链接到问题评论中的一个（甚至可能已通过 stackoverflow 从答案自动转换）。我只是在评论该声明不完全正确。现在您已进行编辑，我已删除我的评论。