fadeToggle () для эффекта CSS3?

Question

Есть ли CSS3, эквивалентный .fadeToggle() в jQuery?

Я начал гуглить, увидев, что мой 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

Эффект, который вы создаете (нажатие на div показывает / скрывает его), невозможен только с использованием CSS.Нет никакого способа привязать подобные события щелчка (ну, если вы не учитываете псевдокласс :focus в полях ввода).

Однако переход CSS будет работать, если вы будете использовать JQuery для переключения класса (например, .active). JSFiddle здесь. Однако, на самом деле, это не очень хороший способ справиться с замиранием, поскольку JQuery проделывает большую работу за кулисами, обрабатывая различные браузеры и их конкретные реализации opacity.Но, если вы делали что-то вроде изменения ширины div, это здорово, потому что это позволяет вам сохранить все ваши стили в CSS и логику, содержащуюся в Javascript.

Answer 2

Вы можете эмулировать клик без JavaScript.Просто измените псевдокласс с наведения на фокус.Вам нужно добавить tabindex, чтобы элемент мог удерживать фокус.

    <div id="cf">
    <img class="bottom" tabindex="2" src="http://www.w3schools.com/css/klematis.jpg" />
    </div>

Тогда вы просто используете: focus, потому что для этого требуется щелчок или касание:

    #cf img:focus {
    opacity:0; 
    }

Вот мой (измененный)fiddle: http://jsfiddle.net/Lc84p3cw/ Конечно, это работает в обратном направлении, вы щелкаете по нему, и оно затухает, а затем снова появляется ...

Answer 3

Да, вы можете использовать переход , см. здесь для jsFiddle , показывающего его в действии