Вопросы с меткой [transition]
Эта метка обозначает видимый, анимированный переход от однгого представления к другому. Используйте эту метку для вопросов о переходах между экранами или видами в приложениях, на веб-страницах или об аналогичных визуальных эффектах. Также укажите метку используемой технологии.
90
вопросов
0
голосов
0ответов
5 показов
vue 3 router transition+gsap - как решить проблему с глюком
Решил анимировать переходы между страницами, но на некоторых из них используется анимация gsap и когда я добавил transition на router-view начались глюки с анимацией gsap - все что анимировалось не ...
0
голосов
1ответ
28 показов
Дергается шрифт при смене opacity через transition
проблема при ховере, получается эффект изменения font weight на время transition, как его убрать?
шрифт использую Open-Sans подключаю через google-fonts
.header-menu {
display: flex;
list-...
2
голоса
2ответа
33 показа
Плавная анимация для подложки бокового меню
Всех приветствую.
Реализовываю боковое меню вот из этого примера: https://blog-kopilka.ru/demo_html/bootstrap4-sidebar/index.php
Не получается решить вопрос со скоростью появления/исчезновения ...
0
голосов
0ответов
29 показов
Как реализовать подобный переход с помощью barba.js?
https://www.reed.be/
Нужно чтобы с того же места линка на какой нажимаем, розъезжалась новая страница
Вот пример, того что я пытался сделать
barba.init({
transitions: [{
name: '...
0
голосов
2ответа
35 показов
Shared Element Transition from Recycelrview to Activity
Подскажите пожалуйста почему так происходит? Что я не так делаю?
скрин экрана
Listener
public interface NoteListener {
void onNoteClicked(Note note, int position, RelativeLayout noteLayout);
}
...
0
голосов
1ответ
46 показов
Не применяется transition
Всем привет, есть вот такой таб. Почему-то для основного текста не применяется свойство transition. При переключении на другую вкладку. В чем может быть проблема?
var btnContainer = document....
0
голосов
1ответ
33 показа
CSS transition, max-height
Имеется боковая панель, содержащая в себе список с элементами разной высоты (зависит от длины текста). При сворачивании эта панель должна отображать только часть содержимого элементов списка.
...
4
голоса
2ответа
226 показов
Обратная анимация CSS (изменение цвета) при наведении и убирании курсора
Основная цель была такая:
cоздать анимацию для блока, чтобы при наведении на него курсора блок менял цвет дважды и сохранял последний цвет анимации, а после отведения курсора - менял цвета в обратном ...
2
голоса
0ответов
34 показа
css бегущая строка: одинаковая скорость прокрутки для разных по ширине блоков
Прошу помощи: пишу простенький скрипт бегущей строки. Хочу сделать чтобы блоки с разной длиной контента, и как следствие с разной шириной, имели одинаковую скорость прокрутки, но очевидно, что общее ...
0
голосов
1ответ
123 показа
React анимация загрузки и появления контента
У меня есть компонент Kino, который загружает какие-то данные с сервера и рендерит их.
Есть три состояния - isLoaded, error, items.
Пока isLoaded == false нужно отображать компонент Loading,
когда ...
2
голоса
1ответ
81 показ
Как сделать один :hover для двух элементов?
У меня есть родительский элемент – желтый блок. И дочерний – фиолетовый блок. Отдельно для каждого блока я прописываю :hover, так как при наведении каждому из них я прописываю разные параметры.
Вопрос:...
1
голос
2ответа
56 показов
Как развернуть и свернуть CardView в Android?
Видел как много людей использует CardView, как пример:
В закрытом виде
В открытом
Но не могу понять каким образом его так развернуть и свернуть. Прошу помощи или примера кода.
P.S. Вроде как слышал, ...
5
голосов
2ответа
101 показ
Как при наведении на изображение подчеркнуть текст?
Пример один:
.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ответ
107 показов
Не работает transition по linear-gradient
Всем привет!
Когда я использую смена цвета через hover таким образом:
.button {
background: linear-gradient(180deg, #EEF2EE, #D4D4D4);
-webkit-transition: .5s ease-in-out;
-moz-transition: ...
0
голосов
2ответа
49 показов
Элемент не исчезает полностью при hover transition
Создал меню-навигацию:
.nav-item::before,
.nav-item::after {
content: "";
width: 0;
height: 3px;
background-color: #ff0036;
display: block;
margin: 0 auto;
margin-...
0
голосов
0ответов
15 показов
Как подогнать css под Safari и IE-11?
6 изображений по центру, по плану при наведении курсора картинка затемняется, сверху появляется описание. Стили работают как задумано только в Chrome и Opera. В Сафари рамка не всплывает, текст не ...
2
голоса
0ответов
35 показов
Как правильно масштабировать TextView, используя Shared Element Transition?
Я попытался сделать переход между активностями с использованием общего элемента TextView, как это было показано в Google I/O 2016, но он работает странно, так как текст как будто не вмещается в какой-...
0
голосов
0ответов
21 показ
Переход с помощью this.router.push с отслеживанием конца анимации в VUE CLI
Здравсвуйте! очень надеюсь на вашу помошь!
Работаю с Vue Cli, есть элемент который должен анимироваться по клику (это я сделал), затем следует переход на "другую страницу" (это я сделал) Но, ...
0
голосов
2ответа
102 показа
Как сделать при наведении курсора на картинку с текстом (которая является ссылкой) так, чтобы анимация срабатывала только на картинку?
Пробовал текст делать ссылкой и добавлять на него фон, анимация происходит картинки вместе с текстом. Попробовал отдельно сделать два разных блока: картинку и текст, тогда не весь блок работает как ...
1
голос
2ответа
34 показа
Как правильно задать transition?
Подскажите, как задать transition так, чтобы зелёное меню плавно выплывало влево?
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>...
1
голос
1ответ
24 показа
Как победить «дрожащий» input после наведения?
Подскажите, пожалуйста, как избавиться от такого бага:
Видео 15 секунд
При отведении курсора с инпута, если использовать transition, происходит его расширение, см.видео.
0
голосов
0ответов
18 показов
Не работает свойство transition для элемента font-weight
Всем доброго времени суток. Верстая макет соц сети, столкнулся с интересной особенностью: при указании свойства transition all для ссылки при :hover, transition работает для всего кроме свойства font-...
0
голосов
1ответ
100 показов
Не работает transition c box-shadow
Не работает transition при hover на кнопке. Сам box-shadow появляется,но без анимации. Что примечательно на пару блоков выше, точно такой же код работает прекрасно, а здесь не работает вообще.
...
-5
голосов
2ответа
116 показов
Как в css задать два разных времени транзишена для двух теней?
Как в css задать два разных времени транзишена для двух теней? чтобы две тени начали анимироваться одновременно, но продолжительность их анимации была разная?
.game-item {
transition box-...
1
голос
1ответ
96 показов
Создание и последующая css анимация элемента по клику
Есть вот такой код:
let icons = document.querySelectorAll(".icon") || [];
icons.forEach(e => e.addEventListener("click", clickIcon));
function clickIcon(event) {
let myEvent = new Event("...
1
голос
1ответ
26 показов
Как запустить анимацию перехода между активити с общим элементом после создания второй активити
Есть задача, при переходе с одной актвити на другую, "перемещается" общий элемент (ImageView), во второй активити есть RecyclerView куда эта картинка и попадает. Вопрос, как запустить анимацию ...
0
голосов
2ответа
35 показов
Странная задержка у input
http://www.studita.tmweb.ru/log.php
При нажатии на кнопку на логотип СТУДИТА меняется цвет, и если обратить внимание на input то модно увидеть странную задержку. Помогите её убрать. Или есть идеи ...
3
голоса
0ответов
69 показов
Интерполяция по кривым Безье
Как устроена интерполяция transition при использовании кривых безье? Что происходит, если указанная кривая Безье выходит на пределы интерполируемого отрезка?
section {
width: 50%;
margin: ...
5
голосов
1ответ
90 показов
Как анимируется цвет?
Как интерполируется цвет при анимации? Что происходит, если указанная кривая безье выходит на пределы интерполируемого отрезка?
Т. е. есть
y = transitionTimintFunction(t) // некое текущее значение
...
1
голос
1ответ
59 показов
Как дождаться окончания transition
Есть вёрстка - https://mihinov.github.io/news/
При клике на меню, выходит оверлей, в котором есть календарик
Если нажать на крестик, то меню начнёт закрываться. Если во время закрытия пролистнуть ...
1
голос
1ответ
353 показа
Почему анимация transition дёрганная?
Почему у второй чёрточки анимация дёрганная? Я задал всем чёрточкам transition: all 5s linear, но вторая чёрточка при начале анимация очень резко повышает расположение по высоте, в чём проблема?
...
1
голос
0ответов
22 показа
TransitionManager и вложенные ViewGroup
По клику одной из кнопок меняется набор кнопок и некоторые делали в каждом конкретном view в списке. Анимация на AutoTransition, без изысков. Я это сделал, это работает, но мне не нравится как =) ...
0
голосов
0ответов
80 показов
Анимация и рендеринг в React. Глючит анимация, как бороться?
У меня есть боковая панель, внутри которой в момент ее выдвижения (средствами css transition) рендерится список. Из-за этого анимация глючит и затормаживается, панель выезжает обрывками.
Как с этим ...
0
голосов
0ответов
53 показа
Переход с общим элементом
Цель сделать переход между окнами с общим элементом (изображением). Нужно из окна А перейти в окно B с общим изображением (изображение ниже).
Activity A (переход через секунду):
if (Build.VERSION....
0
голосов
0ответов
182 показа
Не работает transition VueJS
В самописном приложении светофор не работает анимация прозрачности через компонент-обертку "transition".
<template>
<div id="yellowpage">
<center><h2>Вы находитесь ...
1
голос
1ответ
66 показов
Баг с transition CSS
При наведении мыши фотография m_pic плавно меняется на hid, но ПОСЛЕ того как убираешь мышь с объекта, смена фотографий происходит очень резко. С перва резко появляется фотография m_pic а вот hid ...
0
голосов
1ответ
227 показов
Почему не работает transition?
Вот тут не работает трансишн
.balance{
overflow: hidden;
position: relative;
}
.balance:before{
content: '';
position: absolute;
width: 100%;
height: 50px;
left: 0;
...
1
голос
0ответов
31 показ
Изменение позиции блока с центра экрана на “своё” место в блоке
Описание задачи: Есть прелоадер, который показывает текст, пока страница грузится. Его текст совпадает с текстом в шапке сайта. На данный момент, данный текст "уезжает" за края страницы после её ...
0
голосов
0ответов
40 показов
Есть ли js библиотека для подобных переходов при скролле?
Мне нравится переход при скроле между блоками на этом сайте https://www.squarespace.com/about/timeline , но не знаю есть ли уже какое-то готовое решения для подобного скролла в виде библиотеки или еще ...
0
голосов
1ответ
134 показа
requestAnimationFrame vs settimeout 0 для анимации display:none
Пытаюсь сделать анимационные переходы как во Vue.js для блока с display:none
То-есть сначала блоку добавляется display, на следующем кадре должна начаться анимация, после transitionend все классы ...
0
голосов
1ответ
164 показа
Анимация с radiobutton. Смена фона по клику
Нужно сделать такую переключалку на чистом css, без js
Вот что у меня получилось. А как сделать чтобы кружок так же переползал и такую же смену фону как на гифке?
.wrap {
width: 500px;
...
0
голосов
0ответов
42 показа
Скачки анимации transition
https://jsfiddle.net/vw5cm842/1/
Простые аналоговые часы на чистом css, без картинок. Добавление к секундной стрелке правила transition: transform 250ms cubic-bezier(.5, -1, .5, 2); вызывает резкий ...
0
голосов
1ответ
34 показа
Как сделать вынужденное ожидание конца трансформации?
Есть вот такой слайдер, и прописана трансформация для него, если пользователь будет кликать очень быстро, то слайдер не будет успевать пролистывать "кадр" полностью и может остановится на середине, ...
3
голоса
0ответов
51 показ
Анимация как в Gmail Android
В приложении Gmail на андроид используется анимация, аналогичная размещённой по ссылке
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1DenoCsHNb_H1S1zErzmGCxhz6wjmdO8y%2F01-...
1
голос
0ответов
60 показов
Как сделать анимацию скрытия и раскрытия custom view
Задача:
Я хочу сделать анимацию скрытия и раскрытия view по нажатию кнопки.
Проблемы:
Сначала я пытался это сделать меняя visibility (GONE, VISIBLE), но это вызывало некоторые баги при анимации. (...
1
голос
4ответа
52 показа
Как сделать обратную анимацию?
Насколько мне известно в transition работает обратная анимации. Почему в моем примере обратная анимация такая упоротая?
Хочу сделать так, чтобы крестик разложился обратно на параллельные линии https:/...
0
голосов
1ответ
2k показов
Плавное затухание анимации CSS
Всем привет. Есть эффект изменения цвета текста при наведении
a{
color: #000;
}
a:hover{
transition: 2s;
color: yellow;
}
<a>Lorem</a>
Как сделать, чтобы когда ...
1
голос
1ответ
48 показов
CSS. Transition. Как сделадь два transition
CSS. Transition. Как сделадь два transition, чтобы сначало выполнялось одно свойство transition, потом через секунду второе я попробовал, но получилось коряво. Если можно с помощью JS, то предлагайте.
...
2
голоса
1ответ
137 показов
Как задать скорость перехода hover градиенту в css?
Как задать скорость перехода :hover градиенту, чтобы переход был не таким резким:
.posts-item__data {
position: absolute;
top: 20px;
left: 20px;
width: 50px;
height: 60px;
background: ...
1
голос
0ответов
57 показов
Подскажите, пожалуйста, почему может не работать анимация transition
-7
down vote
favorite
при переходе из сетки во viewPager анимация работает корректно, но при переходе в обратную сторону, работает только анимация плавного затемнения Fade, с чем это может быть ...