CSS3 Webkit-переход постепенно исчезает

Question

У меня небольшие проблемы с достижением очень простого эффекта затухания с помощью CSS3. Вот мой сценарий:

У меня есть список с некоторым содержанием в нем. У меня также есть несколько ссылок, которые при нажатии фильтруют содержимое списка. Я хотел бы, чтобы, когда страница загружается, список исчезает, и каждый раз, когда список фильтруется, список должен исчезнуть, а затем исчезнуть с новым содержимым.

Я получил постепенную работу при загрузке страницы. Однако, когда я пытаюсь заставить список исчезнуть и снова исчезнуть, я не могу заставить это работать.

Вот jsfiddle, который я создал, чтобы продемонстрировать, что я пытаюсь сделать. - http://jsfiddle.net/YeKX2/28/

Любая помощь по этому вопросу приветствуется.

Answer 1

Поддерживая его в первую очередь на основе webkit и не используя jQuery, как вам кажется, вы можете сделать следующее для достижения ваших целей:

function test(){
    document.getElementById('list').style.opacity = "0";
    setTimeout("document.getElementById('list').style.opacity = '1';",2000);
}

Вам придется поиграться с временем.

Кроме того, отметим, что если вы хотите повлиять на синхронизацию -webkit-transition, вы можете использовать следующий синтаксис:

document.getElementById('list').style['-webkit-transition'] = "opacity 2s linear";

Answer 2

Я настоятельно рекомендую включить библиотеку jQuery, если это возможно.Тогда исчезновение так же просто, как:

jQuery ("# ​​elementId"). Animate ({opacity: 0});jQuery ("# ​​elementId"). animate ({opacity: 1});

В противном случае вы столкнетесь с проблемами браузера, так как непрозрачность обрабатывается по-разному в некоторых браузерах (IE), а переход webkit является экспериментальнымсобственность Mozilla.