Анимация перед рендером страницы

[vladmih]

Народ как решить такую проблему?
Например какой-то сайдбар у меня скрыт за экраном через минусовой транслейтX или через левую позицию, любой из вариантов, и по клику на что-то он выезжает, но когда происходит рендер (ф5 или переход) страницы, я вижу в секунду как он гад уезжает за экран.
В песочнице такого не наблюдаю, а вот на работе, иногда делаю такие вещи и при загрузке страницы это появляется...

Извините за сумбурность, реально показать не получается. Возможно кто-то сталкивался с подобной проблемой?

Вот пример такого сайдбара
http://codepen.io/hesrun/pen/ZWJjwp

[Igor Schnaider]

Какой браузер?

[Switch74]

такое бывает, когда вы анимируете свойство которым скрываете

пробуйте скрыть элемент по умолчанию другим свойством (не анимируемым)

[Igor Schnaider]

  On 3/31/2016 at 4:41 AM, Switch74 said:

такое бывает, когда вы анимируете свойство которым скрываете

пробуйте скрыть элемент по умолчанию другим свойством (не анимируемым)

Expand  

Но тогда только плавно выезжать будет, а обратно - просто исчезать.

[Switch74]

че бы вдруг?

[Igor Schnaider]

del

Да, я ошибся.

Edited March 31, 2016 by Igor Schnaider

[Николя223]

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

[vladmih]

Да, елемент скрывается через scale, добавил по умолчанию visibility: hidden, он то не анимируемый... Но эффект остается, скрытия через scale остается.

Можно через анимацию, но делал через транзишн с целью простоты самой реализации и меньшего размера написанного текста...

Заметна такая хреновина только в вебките

[Switch74]

Попробуйте сделать два класса show и hide с анимацие
изначально ваш элемент должен быт скрыт без анимации и не иметь этих классов

[vladmih]

  On 3/31/2016 at 12:07 PM, Switch74 said:

Попробуйте сделать два класса show и hide с анимацие
изначально ваш элемент должен быт скрыт без анимации и не иметь этих классов

Expand  

Поняли идею, тоглить классы на которых будут разные анимации, одна открытия другая закрытия?

 

[Switch74]

что-то вроде

[Igor Schnaider]

  On 3/31/2016 at 12:01 PM, vladmih said:

Заметна такая хреновина только в вебките

Expand  

Так какой браузер все-таки? Версия и ос?

[wwt]

а если

right:100%;
...
transform: translateX(100%);
...

?

[vladmih]

  On 3/31/2016 at 1:15 PM, Igor Schnaider said:

Так какой браузер все-таки? Версия и ос?

Expand  

хром 49, yandex 16, ось винда 8.1.
Речь не идет конкретно о транслейте, речь идет любых свойства которые анимируются через транзишин, наверное за исключением опасити, с ним такого не замечал.
Пусть то будет маржин, лефт, райт, топ, боттом, любая трасформация...

Такого рода проблему я замечал уже более года, это появляется иногда. Не могу даже понять из-за чего, возможно из-за того, что сначала формируется ДОМ, потом льются стили, зачастую замечаю это уже на рабочих проектах, а не просто в верстке.

 

Если конкретно, то пример такой http://codepen.io/hesrun/pen/oxeKby