jquery - fadeToggle() 到 CSS3 效果？

Question

是否有与 jQuery 中的 .fadeToggle() 等效的 CSS3？

在看到我的 jq 代码在移动设备上运行得不太流畅后，我在谷歌上进行了搜索，并希望将我现有的代码转换为 CSS3 动画(其中的一部分)。

在下面的代码中，它向底部调用 .fadeToggle() 。我读到一篇文章说可以通过 jQuery 调用 CSS3 效果:http://awardwinningfjords.com/2011/05/06/trigger-css3-animations-with-jquery.html

$(function () {
    function a(a) {
        a.each(function () {
            var b, c;
            a = $(this);
            b = a.find("a.toggle");
            c = a.find("div");
            b.click(function (a) {
                a.preventDefault();
                c.stop(false, true).slideToggle(300);
            });
        });
    }
    a($("div.container"));
});
$(document).ready(function () {
    $(".toggle_overlay").click(function () {
        $(".widget_overlay").fadeToggle();
    });
});

有 CSS3 等效项吗？

Answer 1

纯 CSS 无法实现您要创建的效果(单击 div 显示/隐藏它)。没有任何方法可以绑定(bind)这样的点击事件(好吧，除非您将输入字段上的 :focus 伪类算在内)。

但是，如果您使用 JQuery 切换类(例如 .active)，CSS 转换就会起作用。 JSFiddle here.然而，这实际上并不是处理淡入和淡出的好方法，因为 JQuery 在幕后做了很多工作来处理不同的浏览器及其特定的不透明度实现。但是，如果您正在执行诸如更改 div 的宽度之类的操作，那就太好了，因为它可以让您将所有样式保留在 CSS 中以及包含在 Javascript 中的逻辑。