Как реализовать анимацию-выцветание div при помощи opacity?

Question

[unsstrennen]

Почему именно при помощи opacity?

Сейчас реализовано при помощи fadein на jQuery.
Проблема в том, что fadein делает анимацию "вставляя" элемент посреди контента. А мне нужно, чтобы пока элемент не появился, под элементом было пустое место "под него"

Comments

[Rustam Bainazarov]

Добавлением класса с нужными стилями или просто стилей при нужном обстоятельстве.

[unsstrennen]

Рустам Байназаров, пишу сюда для того, чтобы узнать, как реализовать такую анимацию.

[Rustam Bainazarov]

unsstrennen, CSS-анимации, CSS transition.

[unsstrennen]

Рустам Байназаров, спасибо, сейчас буду изучать матчасть по переходам.

Answer 1

[hzzzzl]

https://codepen.io/anon/pen/gyOXQQ

Answer 2

[Сергей Котов]

Анимация при навидения, скролла, клика, или в области видимости какое тебе нужно?

Comments

[unsstrennen]

В идеале - когда доскроллил так, чтобы весь div был внутри клиентской части браузера, тогда div выцветае

[Сергей Котов]

unsstrennen, как я понял до тех пор пока блок находится вне зоны видемости то opacity: 0. Как только он становится видемым то opacity: 1. Тогда так создаём функцию которая определяет находя ли блок в зони видемости

function come(elem) { var docViewTop = $(window).scrollTop(), docViewBottom = docViewTop + $(window).height(), elemTop = $(elem).offset().top, elemBottom = elemTop + $(elem).height(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); }

if (come("#айдивашегоблока")) {
("#айдивашегоблока"). addClass("visible") ;
}

Css будет такой
#айдивашегоблока{
transition:1s;
Opacity: 0;
}
.visible{
Opacity: 1;
}