Анимация исчезновения div, как это сгладить? - PullRequest
Новая
       1

Анимация исчезновения div, как это сгладить?

0 голосов
/ 01 марта 2012

Я пытался оживить исчезновение div виджета Dashboard, но он просто зверски выглядит как «пуф» (как и исчезает, как и ожидалось, только мгновенно). 

function removeElement(elementId)
{
duration = 9000;    // The length of the animation
interval = 13;  // How often the animation should change
start = 1.0;    // The starting value
finish = 0.0;   // The finishing value
handler = function(animation, current, start, finish) {
    // Called every interval; provides a current value between start and finish
    document.getElementById(elementId).style.opacity = current;
    };
    new AppleAnimator(duration, interval, start, finish, handler).start();
interval = 1;
start= "visible";
finish = "hidden";
duration = 9001;
 handler = function(animation, current, start, finish) {
    document.getElementById(elementId).style.visibility="hidden";
    };
    new AppleAnimator(duration, interval, start, finish, handler).start();

}

Я ожидал, что это "исчезнет" div через миллисекунду после того, как его непрозрачность достигнет нуля, но по не очень очевидной (для меня) причине, он просто сразу исчезает. Если я закомментирую второй код анимации, div исчезнет (но он все еще активен, чего я не хочу).

Все решения, которые я до сих пор видел, основаны на использовании JQuery и ждут события в конце анимации, есть ли другой способ сделать это, кроме JQuery?

Ответы [ 2 ]

1 голос
/ 01 марта 2012

Если вы ищете чистое решение javascript, вероятно, вам нужно хорошее понимание того, как работает событие javascript и, в основном, о языке javascript. В качестве ссылки вы должны проверить этот вопрос на CodeReview

Но, как мне кажется, лучшим решением для вас, а не полагаться на jQuery, является проверка CSS3-анимаций. Даже если они поддерживаются не всеми браузерами, вы можете использовать Modernizer для заполнения многогранников для анимации.

Моя любимая библиотека анимации CSS3 Animate.css . Это довольно аккуратно и дает вам множество демонстраций на странице.

Сначала вам нужно выбрать анимацию и добавить ее в таблицы стилей CSS. Затем есть другой пользовательский класс, который содержит все об анимации. 

.disappear{
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
}

Тогда вы можете использовать события javascript для переключения между классами и вашими Элементами. Ниже описано, как добавить класс к элементу. 

var animationObject = document.getElementById("poof");
animationObject.className = animationObject.className + " disappear";

Если вам нужна дополнительная помощь относительно javascript того, как это должно быть сделано, прочитайте этот ответ .

Надеюсь, это поможет ...

0 голосов
/ 01 марта 2012

Я нашел это: AppleAnimator обладает animator.oncomplete: Обработчик вызывается, когда таймер завершен .

В моем случае: 

var anim =  new AppleAnimator(duration, interval, start, finish, handler);
anim.oncomplete= function(){ 
            document.getElementById(elementId).style.visibility="hidden";
                            };
anim.start();

Документация Apple фактически называет «обратный вызов» самого кода анимации и «обрабатывает» обратный вызов, что поначалу затрудняет его реализацию.

Спасибо, француженка, функция YourCallbackFunction заставила меня понять, что я упускаю что-то, связанное с обратными вызовами: D

...