Javascript-анимацию замещаем CSS3

Современным браузерам доступны все вкусности HTML5 и CSS3. К основным отличительным особенностям можно отнести свойство CSS transition. Переходы (transition) позволяют анимировать элементы страницы просто и элегантно без использования javascript. CSS становится все более эффективным инструментом, переставая быть: “вещью, которая позволяет сайтам выглядеть хорошо”.

Ниже приведены два коротких примера, где javascript-анимация заменена на анимацию CSS (transition).

В чем разница между CSS-анимацией и JS-анимацией

Почему стоит использовать CSS-анимацию? Во-первых, javascript не должен отвечать за красоту – для этого есть CSS.

Возможности CSS всегда были ограничены до определенного уровня. Другими словами, технологии не соответствовали требованиям веб-разработчиков. Именно поэтому разработчики стали использовать возможности javascript для манипуляции элементами DOM (скрыть, открыть и сдвинуть).

Ну, эти дни на исходе (“а так ли это?” прим. переводчика статьи). Сегодня CSS позволят разработчикам реализовать анимацию и переходы, которые раньше мы могли бы создать лишь при помощи javascript. Сейчас, возможно, наступает время менять старые js-плагины на современные css-решения. Давайте рассмотрим несколько таких решений.

Выпадающий блок

Классика. Возможно, одна из первых техник, которую изучают новички. Иногда содержимое или элементы интерфейса должны быть скрыты. CSS-решение, что удивительно, работает даже с меньшим числом ошибок чем js-решение. Давайте рассмотрим, как работает решение реализованное на javascript (используем jQuery для экономии времени и пространства).

Теперь давайте рассмотрим, как можно реализовать тот же эффект на чистом CSS:

Пример выпадающего блока на JS

HTML

    <div id="mydropdown">
    <b>Hover me!</b><br><br>
    This is some test content I wrote into 
    a small box to demonstrate a regular 
    dropdown effect.
</div>

CSS

    * {
    font-family: Arial;
    font-size: 11px;
}

#mydropdown {
    background:#ccc;
    padding:10px;
    overflow:hidden;
    width:200px;
    height:4px;
    cursor: pointer;
}

jQuery

    $("#mydropdown").mouseenter(function(){
    $(this).animate({height: "70px"}, 500);
    
    $(this).mouseleave(function(){
        $(this).animate({height: "4px"}, 500);
    });
});

Пример плавно выпадающего блока на CSS

CSS

    #mydropdown_id_320_js {     
    background:#ccc;     
    padding:10px;     
    overflow:hidden;     
    width:200px;     
    height:34px;     
    cursor:pointer;     
    transition: 0.5s height ease-in; 
    } 
#mydropdown_id_320_js:hover { height:200px; } 

Перемещение элементов

Иногда не достаточно просто скрыть/открыть элемент. В некоторых случаях требуется переместить элемент. Ниже приведено решение (плавное перемешение блоков) на jQuery:

HTML

    <div id="moveit">
    <div id="box">
    </div>
</div>

CSS

    #moveit {
    width:500px;
    height:20px;
    background:#ddd;
    position:relative;
    overflow:hidden;
}

#box {
    width:20px;
    height:20px;
    background:red;
    position:absolute;
    top:0;
    left:0;
}

jQuery

    $("#moveit").mouseenter(function(){
    $("#box").animate({left: "480px"}, 500);
    
    $(this).mouseleave(function(){
           $("#box").animate({left: "0px"}, 500);        
    });
});

Плавное перемещение элементов на CSS

А вот простое решение плавного перемещения на CSS:

CSS

    #moveit {     
    width:500px;     
    height:20px;     
    background:#ddd;     
    position:relative;     
    overflow:hidden; 
} 
#moveit #box {     
    width:20px;     
    height:20px;     
    background:red;     
    position:absolute;     
    top:0;     left:0;     
    transition: 0.5s left ease-in; 
} 
#moveit:hover #box {     
    left:480px; 
} 

Итак, вы увидели два небольших примера из сотен возможностей по замене javascript на css. Экспериментируйте и применяйте на практике новые возможности CSS3, если это допустимо в рамках вашего проекта. Спасибо.

Использованы материалы