Вопросы с меткой [transition]
Эта метка обозначает видимый, анимированный переход от однгого представления к другому. Используйте эту метку для вопросов о переходах между экранами или видами в приложениях, на веб-страницах или об аналогичных визуальных эффектах. Также укажите метку используемой технологии.
109
вопросов
0
голосов
1
ответ
69
показов
css: плавное "выдвигание" созданного блока
подскажите, можно ли как-то реализовать плавное "выдвигание" <div /> блока (т.е. появление с 0 высоты до исходной высоты под каким-то другим блоком), если блок не присутствует ...
0
голосов
0
ответов
33
показа
Анимированные переходы между экранами в Android
пишу приложение под Andoroid, в котором хочу реализовать анимированный переход от главного экрана к боковому меню. Переход осуществляется при свайпе вправо, а поведение и внешний вид отображены ...
0
голосов
0
ответов
21
показ
Canvas. Body. Динамическая высота
Попробую без кода. Есть сайт, на котором я все тестирую (он в профиле).
На странице "Диагональ" есть анимация под :hover . Под ним высота элемента увеличивается.
Весь сайт в модном черном ...
0
голосов
0
ответов
47
показов
Почему не анимируется ширина?
Есть вот такое поле вставки картинки с двумя режимами. При смене режима у внутреннего контейнера меняется ширина (а также стоит overflow-hidden). Таким образом данное сужение контейнера должно ...
-1
голос
2
ответа
53
показа
Как подвинуть круг в следующем переключателе?
Есть следующий переключатель
Вот что получилось с ним сделать
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: black;
}
.radio-btn {
max-width: 40px;
min-...
0
голосов
0
ответов
20
показов
Как анимировать path, используя react icons и framer motion
import { IoMdMenu } from 'react-icons/io';
import { motion } from 'framer-motion';
// анимировать <IoMdMenu /> при помощи path анимации
0
голосов
1
ответ
45
показов
transition не плавное
Есть вот такой код, и transition в нем применяется, но нет плавности, как будто временные интервалы не проставлены вообще.
<div class="btn__holder">
<div class=&...
1
голос
1
ответ
106
показов
Эффект transition через CSS и JS: за и против
Решаю "решенную" задачу:
анимация fadeIn/fadeOut элемента (который
при этом перерисовывается в момент скрытия). Причем все это в цикле.
Во-первых, перекрыл элемент теневым с бОльшим z-index ...
0
голосов
0
ответов
38
показов
Анимация show/hide содержимого canvas
Пожелание очень простое, но никак не могу найти такое же простое решение.
Есть содержимое canvas. Нужно (начиная с темного экрана) плавно показать его радиальным переходом от центра, а потом также ...
0
голосов
1
ответ
25
показов
Помогите создать 'Выпадающий' блок поиска по сайту
`Ребят, написал код, при котором выпадающая строка поиска по сайту скрывается и появляется при помощи visability.
Теперь вопрос остался, а как всё-таки это чудо анимировать?
Подскажите, в каком ...
0
голосов
1
ответ
46
показов
Как правильно сделать плавную анимацию стрелки?
Как сделать чтобы стрелка после наведения еще немного обратно шла? пример тут
Или может есть какой-нибудь онлайн генератор? подобных ненашел
svg {
width:50px;
}
.cases-link ...
0
голосов
0
ответов
26
показов
CSS. Не срабатывает св-во transition
Есть разметка со стилями.
При помощи скрипта к классу .anim добавляется .active, что должно делать .header__item видимым и это должно происходить плавно. Скрипт никак не касается стилей. Он просто ...
0
голосов
0
ответов
39
показов
Как изменять скорость transition css или scss в зависимости от ширены элемента?
Чем больше элемент тем медленнее анимация. Я использую React и scss. Варианты были разные функция calc(), transition-timing-function, даже через React пробовал. Если описывать проблему подробней то ...
2
голоса
0
ответов
72
показа
Как правильно использовать <transition-group> для <tr> элементов в таблице?
Проблема в том, что когда удаляешь tr элемент из таблицы, окружающие его элементы резко перемещаются, вместо того чтобы плавно перелететь на новые места. Тут я использую transition-group.
В ...
0
голосов
2
ответа
289
показов
Плавное раскрытие <div> через transition
Подскажите пожалкйста, как сделать так, чтобы при появлении блока из display none в display block, тот div который находится "сверху" (родитель) плавно менял высоту, я пробовал давать ...
0
голосов
0
ответов
84
показа
анимация при увеличении блока div (transition)
Не получается анимировать div при увеличении его высоты (высота зависит от содержимого, заранее не известного)
<div class="profile-information box">
<div class="information&...
2
голоса
1
ответ
268
показов
Как применить transition только к одному свойству?
При наведении на элемент нужно, чтобы к нему применялся
transform: translate(-20%, -20%) без transition
и
transform: scale(1.5) с задержкой 0.3s
как-то можно отделить их?
0
голосов
0
ответов
61
показ
При масштабировании элемента, текст внутри него не на долго меняется
Есть элемент, при наведении на него он должен увеличится в размере (сделано это при помощи transform: scale(1.1)). Во время увеличения элемента, текст внутри него не на долго изменяется (как будто на ...
0
голосов
1
ответ
400
показов
Работает плавное открытие popup, но быстро закрывает
думаю проще будет посмотреть функционал на сайте здесь. Открывает медленно , но закрывает почему-то быстро.
.popup {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
...
0
голосов
1
ответ
124
показа
CSS hover анимация
При наведении на картинку у меня срабатывает анимация, но я не могу сделать так, чтобы такой же анимацией она возвращалась обратно. Так же она просто РЕЗКО возвращается в исходное положение.
Пробовал ...
0
голосов
0
ответов
54
показа
CSS before/after с переходами (transitions)
У меня есть иконка-гамбургер, в которой тело блока, содержащего её это средняя линия иконки, а before с after — верхние и нижние линии соответственно. Мне нужно при нажатии на иконку (добавляется ...
0
голосов
1
ответ
330
показов
Выезжающий блок на чистом CSS
Есть коллаж с фотографиями, при наведение курсора на фотографию, необходимо чтобы плавно выезжал блок с текстом (:hover), но получается так, что при использование transform: translateX(-50%), блок ...
1
голос
1
ответ
26
показов
Не срабатывает параметр transition | JS
Написал диву стиль transition: width 1s ease-in-out;
Когда через панель инструментов меняю ширину с 280px на 0, то все работает плавно. НО, если я делаю то же самое через js:
element.style.width = 0, ...
-1
голос
2
ответа
592
показа
При использовании transform: scale некорректно работает object-fit
Есть карточки товаров (выглядят как карточки товаров). Картинка, потом заголовок и описание.
<section class="projects__section c-container--center-max">
<h2 class="visually-...
0
голосов
1
ответ
186
показов
Дергается шрифт при смене opacity через transition
проблема при ховере, получается эффект изменения font-weight на время transition, как его убрать?
шрифт использую Open-Sans подключаю через google-fonts
.header-menu {
display: flex;
list-...
2
голоса
2
ответа
896
показов
Плавная анимация для подложки бокового меню
Всех приветствую.
Реализовываю боковое меню вот из этого примера: https://blog-kopilka.ru/demo_html/bootstrap4-sidebar/index.php
Не получается решить вопрос со скоростью появления/исчезновения ...
0
голосов
2
ответа
42
показа
Shared Element Transition from Recycelrview to Activity
Подскажите пожалуйста почему так происходит? Что я не так делаю?
скрин экрана
Listener
public interface NoteListener {
void onNoteClicked(Note note, int position, RelativeLayout noteLayout);
}
...
0
голосов
1
ответ
78
показов
Не применяется transition
Всем привет, есть вот такой таб. Почему-то для основного текста не применяется свойство transition. При переключении на другую вкладку. В чем может быть проблема?
var btnContainer = document....
0
голосов
1
ответ
88
показов
CSS transition, max-height
Имеется боковая панель, содержащая в себе список с элементами разной высоты (зависит от длины текста). При сворачивании эта панель должна отображать только часть содержимого элементов списка.
...
4
голоса
2
ответа
3k
показов
Обратная анимация CSS (изменение цвета) при наведении и убирании курсора
Основная цель была такая:
cоздать анимацию для блока, чтобы при наведении на него курсора блок менял цвет дважды и сохранял последний цвет анимации, а после отведения курсора - менял цвета в обратном ...
2
голоса
0
ответов
210
показов
css бегущая строка: одинаковая скорость прокрутки для разных по ширине блоков
Прошу помощи: пишу простенький скрипт бегущей строки. Хочу сделать чтобы блоки с разной длиной контента, и как следствие с разной шириной, имели одинаковую скорость прокрутки, но очевидно, что общее ...
0
голосов
1
ответ
1k
показов
React анимация загрузки и появления контента
У меня есть компонент Kino, который загружает какие-то данные с сервера и рендерит их.
Есть три состояния - isLoaded, error, items.
Пока isLoaded == false нужно отображать компонент Loading,
когда ...
2
голоса
1
ответ
3k
показов
Как сделать один :hover для двух элементов?
У меня есть родительский элемент – желтый блок. И дочерний – фиолетовый блок. Отдельно для каждого блока я прописываю :hover, так как при наведении каждому из них я прописываю разные параметры.
Вопрос:...
1
голос
2
ответа
305
показов
Как развернуть и свернуть CardView в Android?
Видел как много людей использует CardView, как пример:
В закрытом виде
В открытом
Но не могу понять каким образом его так развернуть и свернуть. Прошу помощи или примера кода.
P.S. Вроде как слышал, ...
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;
...
3
голоса
1
ответ
2k
показов
Не работает transition по linear-gradient
Всем привет!
Когда я использую смена цвета через hover таким образом:
.button {
background: linear-gradient(180deg, #EEF2EE, #D4D4D4);
-webkit-transition: .5s ease-in-out;
-moz-transition: ...
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-...
2
голоса
0
ответов
49
показов
Как правильно масштабировать TextView, используя Shared Element Transition?
Я попытался сделать переход между активностями с использованием общего элемента TextView, как это было показано в Google I/O 2016, но он работает странно, так как текст как будто не вмещается в какой-...
0
голосов
2
ответа
166
показов
Как сделать при наведении курсора на картинку с текстом (которая является ссылкой) так, чтобы анимация срабатывала только на картинку?
Пробовал текст делать ссылкой и добавлять на него фон, анимация происходит картинки вместе с текстом. Попробовал отдельно сделать два разных блока: картинку и текст, тогда не весь блок работает как ...
1
голос
2
ответа
76
показов
Как правильно задать transition?
Подскажите, как задать transition так, чтобы зелёное меню плавно выплывало влево?
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...
1
голос
1
ответ
35
показов
Как победить «дрожащий» input после наведения?
Подскажите, пожалуйста, как избавиться от такого бага:
Видео 15 секунд
При отведении курсора с инпута, если использовать transition, происходит его расширение, см.видео.
0
голосов
1
ответ
438
показов
Не работает transition c box-shadow
Не работает transition при hover на кнопке. Сам box-shadow появляется,но без анимации. Что примечательно на пару блоков выше, точно такой же код работает прекрасно, а здесь не работает вообще.
...
-5
голосов
2
ответа
139
показов
Как в css задать два разных времени транзишена для двух теней?
Как в css задать два разных времени транзишена для двух теней? чтобы две тени начали анимироваться одновременно, но продолжительность их анимации была разная?
.game-item {
transition box-...
1
голос
1
ответ
188
показов
Создание и последующая css анимация элемента по клику
Есть вот такой код:
let icons = document.querySelectorAll(".icon") || [];
icons.forEach(e => e.addEventListener("click", clickIcon));
function clickIcon(event) {
let myEvent = new Event("...
1
голос
1
ответ
32
показа
Как запустить анимацию перехода между активити с общим элементом после создания второй активити
Есть задача, при переходе с одной актвити на другую, "перемещается" общий элемент (ImageView), во второй активити есть RecyclerView куда эта картинка и попадает. Вопрос, как запустить анимацию ...
0
голосов
2
ответа
51
показ
Странная задержка у input
http://www.studita.tmweb.ru/log.php
При нажатии на кнопку на логотип СТУДИТА меняется цвет, и если обратить внимание на input то модно увидеть странную задержку. Помогите её убрать. Или есть идеи ...
4
голоса
2
ответа
196
показов
Интерполяция по кривым Безье c отрицательными параметрами
Как устроена интерполяция transition при использовании кривых безье? Что происходит, если указанная кривая Безье выходит на пределы интерполируемого отрезка?
section {
width: 50%;
margin: ...
5
голосов
1
ответ
107
показов
Как анимируется цвет?
Как интерполируется цвет при анимации? Что происходит, если указанная кривая безье выходит на пределы интерполируемого отрезка?
Т. е. есть
y = transitionTimintFunction(t) // некое текущее значение
...
1
голос
1
ответ
333
показа
Как дождаться окончания transition
Есть вёрстка - https://mihinov.github.io/news/
При клике на меню, выходит оверлей, в котором есть календарик
Если нажать на крестик, то меню начнёт закрываться. Если во время закрытия пролистнуть ...
1
голос
1
ответ
867
показов
Почему анимация transition дёрганная?
Почему у второй чёрточки анимация дёрганная? Я задал всем чёрточкам transition: all 5s linear, но вторая чёрточка при начале анимация очень резко повышает расположение по высоте, в чём проблема?
...