Итак, я использовал переходы CSS раньше, но у меня есть уникальный случай с этим. Я пишу пользовательский плагин для создания модалов. По существу я создаю div на лету document.createElement('div') и добавляю его в тело с несколькими классами. Эти классы определяют цвет и непрозрачность. Я хотел бы использовать строго CSS, чтобы иметь возможность исчезать в этом div, но изменение состояния кажется трудным b/c, для чего требуется некоторое взаимодействие с пользователем.
Пробовал некоторые продвинутые селекторы, надеясь, что это приведет к изменению состояния, попробует медиа-запрос, надеясь изменить состояние... ищет любые идеи и предложения, я действительно хочу сохранить это в CSS, если возможно
Поддержка ключевых фреймов 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>ОК, прежде всего, я не уверен, как это работает, когда вы создаете 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
Я считаю, что вы могли бы добавитьClass к элементу. Но в любом случае вам придется использовать JQuery или reg JS
div {
opacity:0;
transition:opacity 1s linear;*
}
div.SomeClass {
opacity:1;
}