Вопросы с меткой [transition]

Эта метка обозначает видимый, анимированный переход от однгого представления к другому. Используйте эту метку для вопросов о переходах между экранами или видами в приложениях, на веб-страницах или об аналогичных визуальных эффектах. Также укажите метку используемой технологии.

Фильтрация
Сортировка
Метки
0 голосов
1 ответ
69 показов

css: плавное "выдвигание" созданного блока

подскажите, можно ли как-то реализовать плавное "выдвигание" <div /> блока (т.е. появление с 0 высоты до исходной высоты под каким-то другим блоком), если блок не присутствует ...
Zhihar's user avatar
  • 36.9k
0 голосов
0 ответов
33 показа

Анимированные переходы между экранами в Android

пишу приложение под Andoroid, в котором хочу реализовать анимированный переход от главного экрана к боковому меню. Переход осуществляется при свайпе вправо, а поведение и внешний вид отображены ...
Савелий Зайцев's user avatar
0 голосов
0 ответов
21 показ

Canvas. Body. Динамическая высота

Попробую без кода. Есть сайт, на котором я все тестирую (он в профиле). На странице "Диагональ" есть анимация под :hover . Под ним высота элемента увеличивается. Весь сайт в модном черном ...
serega da's user avatar
0 голосов
0 ответов
47 показов

Почему не анимируется ширина?

Есть вот такое поле вставки картинки с двумя режимами. При смене режима у внутреннего контейнера меняется ширина (а также стоит overflow-hidden). Таким образом данное сужение контейнера должно ...
blnk.off's user avatar
-1 голос
2 ответа
53 показа

Как подвинуть круг в следующем переключателе?

Есть следующий переключатель Вот что получилось с ним сделать * { padding: 0; margin: 0; box-sizing: border-box; } body { background: black; } .radio-btn { max-width: 40px; min-...
blnk.off's user avatar
0 голосов
0 ответов
20 показов

Как анимировать path, используя react icons и framer motion

import { IoMdMenu } from 'react-icons/io'; import { motion } from 'framer-motion'; // анимировать <IoMdMenu /> при помощи path анимации
Alexandr Beknazaryan's user avatar
0 голосов
1 ответ
45 показов

transition не плавное

Есть вот такой код, и transition в нем применяется, но нет плавности, как будто временные интервалы не проставлены вообще. <div class="btn__holder"> <div class=&...
xenozar's user avatar
1 голос
1 ответ
106 показов

Эффект transition через CSS и JS: за и против

Решаю "решенную" задачу: анимация fadeIn/fadeOut элемента (который при этом перерисовывается в момент скрытия). Причем все это в цикле. Во-первых, перекрыл элемент теневым с бОльшим z-index ...
lesobrod's user avatar
  • 212
0 голосов
0 ответов
38 показов

Анимация show/hide содержимого canvas

Пожелание очень простое, но никак не могу найти такое же простое решение. Есть содержимое canvas. Нужно (начиная с темного экрана) плавно показать его радиальным переходом от центра, а потом также ...
lesobrod's user avatar
  • 212
0 голосов
1 ответ
25 показов

Помогите создать 'Выпадающий' блок поиска по сайту

`Ребят, написал код, при котором выпадающая строка поиска по сайту скрывается и появляется при помощи visability. Теперь вопрос остался, а как всё-таки это чудо анимировать? Подскажите, в каком ...
user avatar
0 голосов
1 ответ
46 показов

Как правильно сделать плавную анимацию стрелки?

Как сделать чтобы стрелка после наведения еще немного обратно шла? пример тут Или может есть какой-нибудь онлайн генератор? подобных ненашел svg { width:50px; } .cases-link ...
daladnanenada's user avatar
0 голосов
0 ответов
26 показов

CSS. Не срабатывает св-во transition

Есть разметка со стилями. При помощи скрипта к классу .anim добавляется .active, что должно делать .header__item видимым и это должно происходить плавно. Скрипт никак не касается стилей. Он просто ...
wnsy's user avatar
  • 30
0 голосов
0 ответов
39 показов

Как изменять скорость transition css или scss в зависимости от ширены элемента?

Чем больше элемент тем медленнее анимация. Я использую React и scss. Варианты были разные функция calc(), transition-timing-function, даже через React пробовал. Если описывать проблему подробней то ...
Pr Andrey's user avatar
2 голоса
0 ответов
72 показа

Как правильно использовать <transition-group> для <tr> элементов в таблице?

Проблема в том, что когда удаляешь tr элемент из таблицы, окружающие его элементы резко перемещаются, вместо того чтобы плавно перелететь на новые места. Тут я использую transition-group. В ...
Dmitry_allread_return's user avatar
0 голосов
2 ответа
289 показов

Плавное раскрытие <div> через transition

Подскажите пожалкйста, как сделать так, чтобы при появлении блока из display none в display block, тот div который находится "сверху" (родитель) плавно менял высоту, я пробовал давать ...
Ar Santa's user avatar
0 голосов
0 ответов
84 показа

анимация при увеличении блока div (transition)

Не получается анимировать div при увеличении его высоты (высота зависит от содержимого, заранее не известного) <div class="profile-information box"> <div class="information&...
Ar Santa's user avatar
2 голоса
1 ответ
268 показов

Как применить transition только к одному свойству?

При наведении на элемент нужно, чтобы к нему применялся transform: translate(-20%, -20%) без transition и transform: scale(1.5) с задержкой 0.3s как-то можно отделить их?
Ilya Goncharov's user avatar
0 голосов
0 ответов
61 показ

При масштабировании элемента, текст внутри него не на долго меняется

Есть элемент, при наведении на него он должен увеличится в размере (сделано это при помощи transform: scale(1.1)). Во время увеличения элемента, текст внутри него не на долго изменяется (как будто на ...
Дмитрий's user avatar
0 голосов
1 ответ
400 показов

Работает плавное открытие popup, но быстро закрывает

думаю проще будет посмотреть функционал на сайте здесь. Открывает медленно , но закрывает почему-то быстро. .popup { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); ...
Johnny's user avatar
  • 1
0 голосов
1 ответ
124 показа

CSS hover анимация

При наведении на картинку у меня срабатывает анимация, но я не могу сделать так, чтобы такой же анимацией она возвращалась обратно. Так же она просто РЕЗКО возвращается в исходное положение. Пробовал ...
danilious's user avatar
0 голосов
0 ответов
54 показа

CSS before/after с переходами (transitions)

У меня есть иконка-гамбургер, в которой тело блока, содержащего её это средняя линия иконки, а before с after — верхние и нижние линии соответственно. Мне нужно при нажатии на иконку (добавляется ...
Evil Incarnation DIO's user avatar
0 голосов
1 ответ
330 показов

Выезжающий блок на чистом CSS

Есть коллаж с фотографиями, при наведение курсора на фотографию, необходимо чтобы плавно выезжал блок с текстом (:hover), но получается так, что при использование transform: translateX(-50%), блок ...
Fanzholl's user avatar
1 голос
1 ответ
26 показов

Не срабатывает параметр transition | JS

Написал диву стиль transition: width 1s ease-in-out; Когда через панель инструментов меняю ширину с 280px на 0, то все работает плавно. НО, если я делаю то же самое через js: element.style.width = 0, ...
Sire IMPACTUS's user avatar
-1 голос
2 ответа
592 показа

При использовании transform: scale некорректно работает object-fit

Есть карточки товаров (выглядят как карточки товаров). Картинка, потом заголовок и описание. <section class="projects__section c-container--center-max"> <h2 class="visually-...
MrShnaider's user avatar
0 голосов
1 ответ
186 показов

Дергается шрифт при смене opacity через transition

проблема при ховере, получается эффект изменения font-weight на время transition, как его убрать? шрифт использую Open-Sans подключаю через google-fonts .header-menu { display: flex; list-...
AndreyTheHive's user avatar
2 голоса
2 ответа
896 показов

Плавная анимация для подложки бокового меню

Всех приветствую. Реализовываю боковое меню вот из этого примера: https://blog-kopilka.ru/demo_html/bootstrap4-sidebar/index.php Не получается решить вопрос со скоростью появления/исчезновения ...
Роджер Саковский's user avatar
0 голосов
2 ответа
42 показа

Shared Element Transition from Recycelrview to Activity

Подскажите пожалуйста почему так происходит? Что я не так делаю? скрин экрана Listener public interface NoteListener { void onNoteClicked(Note note, int position, RelativeLayout noteLayout); } ...
Paul's user avatar
  • 25
0 голосов
1 ответ
78 показов

Не применяется transition

Всем привет, есть вот такой таб. Почему-то для основного текста не применяется свойство transition. При переключении на другую вкладку. В чем может быть проблема? var btnContainer = document....
O.Yudin's user avatar
  • 322
0 голосов
1 ответ
88 показов

CSS transition, max-height

Имеется боковая панель, содержащая в себе список с элементами разной высоты (зависит от длины текста). При сворачивании эта панель должна отображать только часть содержимого элементов списка. ...
bodynar's user avatar
  • 324
4 голоса
2 ответа
3k показов

Обратная анимация CSS (изменение цвета) при наведении и убирании курсора

Основная цель была такая: cоздать анимацию для блока, чтобы при наведении на него курсора блок менял цвет дважды и сохранял последний цвет анимации, а после отведения курсора - менял цвета в обратном ...
Egorqs's user avatar
  • 53
2 голоса
0 ответов
210 показов

css бегущая строка: одинаковая скорость прокрутки для разных по ширине блоков

Прошу помощи: пишу простенький скрипт бегущей строки. Хочу сделать чтобы блоки с разной длиной контента, и как следствие с разной шириной, имели одинаковую скорость прокрутки, но очевидно, что общее ...
Ilya Bazhinov's user avatar
0 голосов
1 ответ
1k показов

React анимация загрузки и появления контента

У меня есть компонент Kino, который загружает какие-то данные с сервера и рендерит их. Есть три состояния - isLoaded, error, items. Пока isLoaded == false нужно отображать компонент Loading, когда ...
Color kat's user avatar
  • 552
2 голоса
1 ответ
3k показов

Как сделать один :hover для двух элементов?

У меня есть родительский элемент – желтый блок. И дочерний – фиолетовый блок. Отдельно для каждого блока я прописываю :hover, так как при наведении каждому из них я прописываю разные параметры. Вопрос:...
Eva's user avatar
  • 1,859
1 голос
2 ответа
305 показов

Как развернуть и свернуть CardView в Android?

Видел как много людей использует CardView, как пример: В закрытом виде В открытом Но не могу понять каким образом его так развернуть и свернуть. Прошу помощи или примера кода. P.S. Вроде как слышал, ...
Артем Артемов's user avatar
5 голосов
2 ответа
317 показов

Как при наведении на изображение подчеркнуть текст?

Пример один: .blog-img-main img { transition: 1s; display: block; width: 20rem; } .blog-img-main img:hover { transform: scale(1.02); } .blog-img-main { -webkit-transition: all 1s ease; ...
Aleksus's user avatar
  • 119
3 голоса
1 ответ
2k показов

Не работает transition по linear-gradient

Всем привет! Когда я использую смена цвета через hover таким образом: .button { background: linear-gradient(180deg, #EEF2EE, #D4D4D4); -webkit-transition: .5s ease-in-out; -moz-transition: ...
Samoilov's user avatar
  • 147
0 голосов
2 ответа
113 показов

Элемент не исчезает полностью при hover transition

Создал меню-навигацию: .nav-item::before, .nav-item::after { content: ""; width: 0; height: 3px; background-color: #ff0036; display: block; margin: 0 auto; margin-...
Darkness In me's user avatar
2 голоса
0 ответов
49 показов

Как правильно масштабировать TextView, используя Shared Element Transition?

Я попытался сделать переход между активностями с использованием общего элемента TextView, как это было показано в Google I/O 2016, но он работает странно, так как текст как будто не вмещается в какой-...
Shandor Hachimann's user avatar
0 голосов
2 ответа
166 показов

Как сделать при наведении курсора на картинку с текстом (которая является ссылкой) так, чтобы анимация срабатывала только на картинку?

Пробовал текст делать ссылкой и добавлять на него фон, анимация происходит картинки вместе с текстом. Попробовал отдельно сделать два разных блока: картинку и текст, тогда не весь блок работает как ...
Андрей's user avatar
1 голос
2 ответа
76 показов

Как правильно задать transition?

Подскажите, как задать transition так, чтобы зелёное меню плавно выплывало влево? HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>...
Programemst's user avatar
1 голос
1 ответ
35 показов

Как победить «дрожащий» input после наведения?

Подскажите, пожалуйста, как избавиться от такого бага: Видео 15 секунд При отведении курсора с инпута, если использовать transition, происходит его расширение, см.видео.
Iliya V. Soldatkin's user avatar
0 голосов
1 ответ
438 показов

Не работает transition c box-shadow

Не работает transition при hover на кнопке. Сам box-shadow появляется,но без анимации. Что примечательно на пару блоков выше, точно такой же код работает прекрасно, а здесь не работает вообще. ...
Valentine's user avatar
  • 182
-5 голосов
2 ответа
139 показов

Как в css задать два разных времени транзишена для двух теней?

Как в css задать два разных времени транзишена для двух теней? чтобы две тени начали анимироваться одновременно, но продолжительность их анимации была разная? .game-item { transition box-...
Алексей Соснин's user avatar
1 голос
1 ответ
188 показов

Создание и последующая css анимация элемента по клику

Есть вот такой код: let icons = document.querySelectorAll(".icon") || []; icons.forEach(e => e.addEventListener("click", clickIcon)); function clickIcon(event) { let myEvent = new Event("...
Dmitry Uchaikin's user avatar
1 голос
1 ответ
32 показа

Как запустить анимацию перехода между активити с общим элементом после создания второй активити

Есть задача, при переходе с одной актвити на другую, "перемещается" общий элемент (ImageView), во второй активити есть RecyclerView куда эта картинка и попадает. Вопрос, как запустить анимацию ...
Anocean's user avatar
  • 75
0 голосов
2 ответа
51 показ

Странная задержка у input

http://www.studita.tmweb.ru/log.php При нажатии на кнопку на логотип СТУДИТА меняется цвет, и если обратить внимание на input то модно увидеть странную задержку. Помогите её убрать. Или есть идеи ...
Taras Osyka's user avatar
4 голоса
2 ответа
196 показов

Интерполяция по кривым Безье c отрицательными параметрами

Как устроена интерполяция transition при использовании кривых безье? Что происходит, если указанная кривая Безье выходит на пределы интерполируемого отрезка? section { width: 50%; margin: ...
Qwertiy's user avatar
  • 121k
5 голосов
1 ответ
107 показов

Как анимируется цвет?

Как интерполируется цвет при анимации? Что происходит, если указанная кривая безье выходит на пределы интерполируемого отрезка? Т. е. есть y = transitionTimintFunction(t) // некое текущее значение ...
Qwertiy's user avatar
  • 121k
1 голос
1 ответ
333 показа

Как дождаться окончания transition

Есть вёрстка - https://mihinov.github.io/news/ При клике на меню, выходит оверлей, в котором есть календарик Если нажать на крестик, то меню начнёт закрываться. Если во время закрытия пролистнуть ...
Михаил Камахин's user avatar
1 голос
1 ответ
867 показов

Почему анимация transition дёрганная?

Почему у второй чёрточки анимация дёрганная? Я задал всем чёрточкам transition: all 5s linear, но вторая чёрточка при начале анимация очень резко повышает расположение по высоте, в чём проблема? ...
Михаил Камахин's user avatar