Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

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

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

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 23.10.2019, 09: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, 12:34   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

ну, видимо после анимации ты снимаешь класс `animate-active`, вот он и возвращает нужное занчение.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 23.10.2019, 15: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, 16:08   #4
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

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


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Типы данных, условный оператор (Чему будет равно значение переменной 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 18:32