Как можно избавиться от бага, который появляется при ресайзе окна?

Question

[Алёша]

Пример: LINK
Между 990 и 989 пикселей, идет медиа запрос, при котором интпут поиска приобретает абсолютное позиционирование, транситион и транслейтY, и при ресайзе из за анимации видно как анимируется это окно, по задумке этого не должно быть, как поправить?

Если менять размер окна с 990 на 989 пикслей и обратно, поймете о чем я.

Comments

[Алёша]

Т.е. оно должно появляться только при его тогле.

Answer 1

[Владимир]

У вас в стилях

.header__panel__search__reset, .header__panel__search__submit svg {
	height: 100%;
	-webkit-transition: all .3s;
	-o-transition: all .3s;
	-moz-transition: all .3s;
	transition: all .3s;
}

Обратите внимание на transition: all .3s;
Маленько ошибся

Comments

[Алёша]

? это анимация к иконкам в строке поиска. А про другое говорю, мне на экранах меньше 990 нужно чтобы у этой строки поиска был транситион алл, и трансформ. Потом при тогле эта строка выезжать должна. А при изменении окна на 990 - 989 - 990 - 989 видно как это окно плавает по середине. Мне нужно чтобы при ресайзах этого не было.

[Владимир]

Алёша, Плавает это окно как раз изза этой анимации. Откройте в девелопер тулзах дебагер анимации и посмотрите. Если анимация не должна цеплять изменения размера при ресайзе, напишите правило так чтобі она его не цепляла.

[Алёша]

Владимир, да нет же. Я про другое говорю, вот на гифке видно что желтое окно поиска начинает мелькать:
Ссылка на гифку

[Алёша]

Владимир, нужно как-то избавиться от этого, там не размер окна цепляется, а цепляется "transform:translateY".

[Владимир]

https://mega.nz/#!xmAHDDbL!ovM3bjvmRt_amwiDQoCXfpY...

[Алёша]

Владимир, да это понятно, этот transition там и должен быть, чтобы анимировать строку поиска когда она на мобиле тоглиться по кнопке.
Она должна появлятся когда нажимаешь на лупу на экранах меньше чем 990 пикселей.

[Алёша]

Владимир, Я знаю почему это происходит, мне нужно это как-то обойти.

[Владимир]

transition: all анимирует все свойства, вместо єтого анимируй только те, которіе тебе нужны.
Кроме этого поставь анимацию на клас, которого нет у элементов, на которых не должно быть анимации.