Fx на Javascript: как исчезать вещи и т. Д. Без рамок? - PullRequest
Новая
       31

Fx на Javascript: как исчезать вещи и т. Д. Без рамок?

1 голос
/ 13 ноября 2009

Я хотел бы узнать, как делать затухание и подобные эффекты на Javascript. Я часто получаю ответы, например, почему бы не использовать Jquery, mootools и т. Д.? Ну я Если вы хотите узнать, как все работает, то я не возражаю против использования любой из этих платформ.

В настоящее время я учусь вносить изменения в DOM, поэтому я прочитал много вещи на эту тему. Кроме того, я прочитал о Reflow, но я не нашел ничего интересного на Repaint, но я продолжу поиск.

Из просмотра исходных файлов и т. Д. Я вижу несколько методов, которые я не знаю, если они созданы или являются основными методами JS.

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

Ответы [ 3 ]

2 голосов
/ 13 ноября 2009

Взгляните на emile.js . Это совершенно новое. Отличный способ научиться делать свое.

Представлено на недавней конференции jsconf. Автор Томаса Фукса (script.aculo.us).

http://github.com/madrobby/emile

Émile Автономная CSS-анимация

Мини-фреймворк JavaScript

Не нужно фреймворк JavaScript

Полный набор CSS свойства для анимации (на основе длины и цвета)

Облегчение и обратные вызовы

Меньше чем 50 строк кода

получать обновления на Twitter: http://twitter.com/emilejs

1 голос
/ 13 ноября 2009

вот пример, который работает в Firefox и Chrome. т.е. не уважает стиль непрозрачности. 

    var ELEMENT;
    var STEPS;
    var INTERVAL;
    var COUNT;
    var TIMERID;

    // 5 * 200ms = 1 second
    STEPS = 5;
    INTERVAL = 200;

    function Button1_onclick() {

        ELEMENT = document.getElementById("foo");
        COUNT = STEPS - 1;
        TIMERID = setInterval(Fade, INTERVAL);
    }

    function Fade() {

        ELEMENT.style.opacity = String(COUNT / STEPS);
        COUNT--;

        if (COUNT < 0) {
            clearInterval(TIMERID);
            TIMERID = 0;
        }
    }

setInterval и clearInterval являются стандартными функциями js. они будут выполнять данную функцию каждые x миллисекунд. в нашем случае мы убиваем его, когда достигаем 0 непрозрачности.

скольжение окна - аналогичный процесс. Вы бы установили левый / правый / верхний / нижний стиль вместо непрозрачности.

0 голосов
/ 13 ноября 2009

Исчезновение с использованием javascript в основном программно изменяет непрозрачность элемента. «Гладкость» достигается с помощью таймеров. То же самое для изменения положения / размера. Вам нужно прочитать css, чтобы понять, какими свойствами стиля элемента вы должны управлять, используя javascript для нужного эффекта.

Если вам действительно любопытно, вы можете погрузиться в источник yui в github: http://github.com/yui

...