Переход CSS затухает

Итак, я использовал переходы CSS раньше, но у меня есть уникальный случай с этим. Я пишу пользовательский плагин для создания модалов. По существу я создаю div на лету document.createElement('div') и добавляю его в тело с несколькими классами. Эти классы определяют цвет и непрозрачность. Я хотел бы использовать строго CSS, чтобы иметь возможность исчезать в этом div, но изменение состояния кажется трудным b/c, для чего требуется некоторое взаимодействие с пользователем.

Пробовал некоторые продвинутые селекторы, надеясь, что это приведет к изменению состояния, попробует медиа-запрос, надеясь изменить состояние... ищет любые идеи и предложения, я действительно хочу сохранить это в CSS, если возможно

Ответ 1

Поддержка ключевых фреймов CSS в наши дни очень хороша:

.fade-in {
	opacity: 1;
	animation-name: fadeInOpacity;
	animation-iteration-count: 1;
	animation-timing-function: ease-in;
	animation-duration: 2s;
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

<h1 class="fade-in">Fade Me Down Scotty</h1>

Ответ 2

ОК, прежде всего, я не уверен, как это работает, когда вы создаете div с помощью (document.createElement('div')), поэтому теперь я могу ошибаться, но не удастся ли использовать селектор псевдо-класса: target для этого?

Если вы посмотрите на приведенный ниже код, вы можете использовать ссылку для таргетинга на div, но в вашем случае можно было бы настроить таргетинг #new на script и таким образом заставить div исчезать без взаимодействия с пользователем, или я не ошибаюсь?

Вот код для моего примера:

HTML

<a href="#new">Click</a> 
<div id="new">
    Fade in ... 
</div>

CSS

#new {
    width: 100px;
    height: 100px;
    border: 1px solid #000000;
    opacity: 0;    
}


#new:target {
    -webkit-transition: opacity 2.0s ease-in;
       -moz-transition: opacity 2.0s ease-in;
         -o-transition: opacity 2.0s ease-in;
                                  opacity: 1;
}

... и здесь jsFiddle

Ответ 3

Я считаю, что вы могли бы добавитьClass к элементу. Но в любом случае вам придется использовать JQuery или reg JS

div {
  opacity:0;
  transition:opacity 1s linear;*
}
div.SomeClass {
  opacity:1;
}