Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail


Ответ
 
Опции темы
Старый 23.10.2019, 10:30   #1
asdwhitefox
Новичок
Джуниор
 
Регистрация: 23.10.2019
Сообщений: 2
По умолчанию После выполнения анимации значение opacity не меняется на 1

Здравствуйте господа.
Возникла проблема.
Код:
@media screen and (min-width:737px) {
  html.csstransitions.csstransforms .animate .opacity-animate { opacity: 0; transition-timing-function:ease-in; transition-property:opacity; transition-duration:500ms; }
  html.csstransitions.csstransforms .animate.animate-active .opacity-animate { opacity: 1;}
  html.csstransitions.csstransforms .animate .text-animate { opacity: 0; transition-property: all; transition-duration:800ms; transition-timing-function: ease-out; transform: translate(0, 100px) }
  html.csstransitions.csstransforms .animate.animate-active .text-animate { opacity: 1; transform: translate(0, 0); }
}
Анимация отрабатывает, но далее значение opacity остаётся 0.
То есть значения
Код:
 
html.csstransitions.csstransforms .animate.animate-active .opacity-animate { opacity: 1;}
html.csstransitions.csstransforms .animate.animate-active .text-animate { opacity: 1; transform: translate(0, 0); }
не используются, хотя должно всё работать.
Может кто чего подскажет.
asdwhitefox вне форума Ответить с цитированием
Старый 23.10.2019, 13:34   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

ну, видимо после анимации ты снимаешь класс `animate-active`, вот он и возвращает нужное занчение.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 23.10.2019, 16:44   #3
asdwhitefox
Новичок
Джуниор
 
Регистрация: 23.10.2019
Сообщений: 2
По умолчанию

Если посмотреть на эти две строки,
Код:
html.csstransitions.csstransforms .animate .text-animate { opacity: 0; transition-property: all; transition-duration:800ms; transition-timing-function: ease-out; transform: translate(0, 100px) }
  html.csstransitions.csstransforms .animate.animate-active .text-animate { opacity: 1; transform: translate(0, 0); }
В первой строке у нас отрабатывает анимацию, после чего должен вступить в действие animate-active.
Но он не отрабатывает эту строку.
Если я снимаю animate-active, в коде страницы изменения отображаются задействованными и значения меняются на:
Код:
 { opacity: 1; transform: translate(0, 0); }
Не могу понять, почему некорректно работает animate-active
asdwhitefox вне форума Ответить с цитированием
Старый 23.10.2019, 17:08   #4
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Он корректно отрабатывает; трансишн, как понятно из названия, обеспечивает плавный переход между двумя состояниями.
Если у тебя сразу состояние "1", то переход не требуется. Если состояние "0", то перехода тоже не будет, он будет на нуле.
А вот когда ты на отрендереной странице скриптом изменишь состояние с "0" на "1", произойдет анимация и объект останется в состоянии "1".
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Типы данных, условный оператор (Чему будет равно значение переменной b после выполнения участка программы) Ксюша Исакова Паскаль, Turbo Pascal, PascalABC.NET 1 18.02.2014 11:21
Меняется значение флага drKoks Общие вопросы C/C++ 4 25.05.2013 18:56
Укажите чему будет равно значение регистра eax после выполнения данного блока инструкций dmitryxxx Assembler - Ассемблер (FASM, MASM, WASM, NASM, GoASM, Gas, RosAsm, HLA) и не рекомендуем TASM 5 08.01.2013 13:59
Переход на сайт после анимации JS 313131 JavaScript, Ajax 7 08.06.2012 08:16
Oпределить значение переменных p после выполнения следующего фрагмента программы AndyMark Паскаль, Turbo Pascal, PascalABC.NET 16 19.12.2010 19:32