Javascript transition не работает

Проблема с работой transition

Прошу помочь в аминировании динамически создаваемых объектов. Объекты создаются, но свойство transition не применяется как нужно. Вернее оно применяется правильно, только если я пользуюсь профайлером — тогда происходит движение, если же без него — то позиция меняется, но без анимации — просто перескакивает.

Идея: создать объект в нужной позиции (100, 100) и плавно его передвинуть в позицию (200, 200).

2 ответа 2

transition не работает для display: none; и блоков, который не были в потоке при загрузки документа. В данном случае нужно использовать animate . За вас делать задачу не буду, однако ниже приведу пример, который вы сможете использовать для своего проекта:

Если так не получилось, то попробуй создать объект, и как только он создастся, вставить ему класс посредством того же js.
А в css задать все необходимые свойства для этого класса, в том числе и анимацию ( transition рекомендуется для таких легких идейных задач). Как только он будет вставлен, анимация запустится.
Вставлять css-ствойства через javascript — последняя задача для анимации. Проблем больше найдешь, чем решишь.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript jquery css html5 или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.10.19.40496

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

Не работает свойство transition?

Добрый день. При наведении на фото должен срабатывать transition. То есть плавно появляться фон и текст.

Скрытый текст:
.about-text <
display: none;
justify-content: center;
flex-direction: column;
width: 100%;
padding: 15px;
position: absolute;
top: 0;
bottom: 0;
transition: 1s;
>

При наведении:
.about-item:hover .about-text <
background: rgba(0, 0, 0, 0.75);
display: flex;
>

• Вопрос задан более трёх лет назад
• 298 просмотров

Оценить 1 комментарий

Есть «дискретные*» свойства. Те, значения которых могут принимать ограниченное число вариантов, они как правило обозначены специальными словами. Например, свойство display может принимать значения none, block, inline и т.д. Свойство text-decoration — none, underline, line-through и т.д. К таким свойствам нельзя применить плавный переход (transition) из одного состояния в другое, потому что между этими состояниями нет промежуточных значений. То же самое относится к свойству z-index, он не может принимать дробных значений, background-image — картинка или есть или ее нет, или она просто сменяется на другую.
Напротив «недискретные» свойства могут плавно перетекать из одного состояния в другое. Преимущественно они заданы числом. Сюда же относится цвет, потому что цвет — это тоже число. Примеры таких свойств: left, width, background-position, font-size и т.д.

Запомните это, и не пытайтесь анимировать «дискретные» свойства.

* «дискретные» — мой термин, я не знаю как правильно их называть.

transition с display не работает
используйте для скрытия:

Источник

Не работает свойство transition при клике на меню

Спросил alex252003,
31 августа 2017

Вопрос

alex252003

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

там используется jquery для отображения меню

я пробую добавить css эффект transition но не работает, в чем может быть проблема?

Ссылка на комментарий

Поделиться на других сайтах

2 ответа на этот вопрос

Рекомендованные сообщения

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.

Похожие публикации

Ребята, без вас никуда!
Подскажите, пожалуйста, первый раз адаптирую и стилизую слайдер splide.
Сам он работает, но как его стилизовать? В dev tools стилизация тех же стрелок отражается, но когда вношу их в css — не работает. Почему так? Как, например, тогда опустить ниже стрелки? Где устанавливать брейкпоинты и задавать им свойства?

Источник

Почему перестают применяться стили CSS после подключения скрипта в HTML?

Кто подскажет, что происходит и почему, когда подключаешь

то перестают работать transition в CSS, чтоб изменить div, его положение и размер с временной отсрочкой.

Откройте HTML в браузере без редактирования, а после раскомментируйте:

В избранное В избранном 0

34 комментария

Есть такая бага, и насколько я понял, люди ей предотвращают старт анимации ))

При этих кейсах, анимации не видно:
или

А если убрать пробел, то отработает

Может лучше переписать на keyframes

В Лисичке нормально отрисовывается. Это вертикально-ориентированная полоска с надписью, и по ней какая-то белая хрень пролетает — верно?

Только я не совсем понимаю дефолтное поведение браузера: кнопка сначала горизонтальная, потом вертикальная (переход анимирован). Но ЕСЛИ страницу обновить или склонировать, этого начального состояния не будет вовсе. НО ЕСЛИ внести в страницу любое изменение (и тег скрипта здесь ни при чём, изменение может быть любым), то страница грузится заново и это начальное состояние ЕСТЬ.

Мне влом с этим разбираться, но дело у тебя явно в СSS, похоже на конкуренцию стилей. Когда правила противоречат друг другу, и какому-то отдаётся приоритет. Есть предположение, что ту анимацию, которую ты хочешь, на чистом CSS не сделаешь, и надо заскриптовать. То есть скриптом подсунешь требуемому элементу нужный класс в нужный момент, уже после отрисовки.

Это вертикально-ориентированная полоска с надписью, и по ней какая-то белая хрень пролетает — верно?

да, чтоб смотрелось нужно под мобилу подогнать окно браузера 320×480

м-да, походу не узнает мир, в чем была проблема 🙁

Источник

Почему неправильно работает transition?

Есть такая кнопка:

Всё работает. То есть при нажатии кнопка исчезает. Но если в .btn в атрибут transition поставить opacity 0.2s ease 1s; (0.2s) то начинаются проблемы. При нажатии кнопка не становится прозрачнее (обычное нажатие) или становится прозрачнее лишь наполовину и без задержки.

Особенно хорошо это проявляется на смартфоне: *Click*

• Вопрос задан более года назад
• 158 просмотров

Все правильно работает.
Псевдокласс :active действует только в момент когда вы жмете на элемент, до момента когда вы его не отпустите.
В первом примере у вас у вас transition-duration (Продолжительность перехода) равна 0 а задержка (transition-delay) равна 1 секунде, но в состоянии :active задержка рана 0. Поэтому в момент клика мы моментально делаем кнопку невидимой так как нет ни задержки ни продолжительности и после того как отпускаем, кнопка появляется через 1 секунду, потому что :active больше нет, а значит время задержки снова равно 1s и мы возвращаемся в исходное положение.

Второй пример работает так же, но transition-duration (Продолжительность перехода) у нас есть и вот сколько вы удерживали кнопку во время клика, на столько она успела стать прозрачной, после чего мы возвращаемся в обратное состояние через 1 секунду, поставьте transition-duration например 5 секунд и увидите что за один клик ничего не происходит, но чем дольше держим тем прозрачнее становится кнопка и начинает возвращаться в исходное положение через секунду
snippet

Отсюда вопрос: Какое поведение вы ожидаете?

Источник