В общем интересная штука нарисовалась. Вот пример. Есть элемент, который в процессе работы сайта неким образом перемещается, для его плавного перемещения используется свойство transition: transform; Именно transform т.к. оно не вызвыает repaint и reflow. Так же при загрузке страницы этот элемент должен выезжать. Для этого используется свойство animation, в @keyframes которой свойство transform изменяется from -100% to 0.
По идее при загрузке страницы animation должна запуститься, отработать независимо от заданного свойства transition, а уже потом в процесе работы сайта, когда элементу назначается какой-то класс изменяющий свойство transform, элемент должен перемещаться с учетом установленного свойства transition. Во всех браузерах так и есть, кроме FF. В фаерфоксе при первом запуске страницы свойства animation и transition "накладываются" друг на друга и вызывают глючное поведение элемента
В примере при первом запуске в FF видно, что элемент дважды анимируется. Кроме того я сделал две кнопки, вызывающие удаление и повторное добавление элемента на страницу (одна добавляет элемент сразу, вторая через пол секунды - для того чтобы исключить какое либо кеширование элемента браузером или еще что-то в этом роде, мало ли как браузер оптимизирует JS инструкции). И при новом добавлении элемента такого глюка уже нету. Само перемещение элемента (доступно при клике на него) работает как надо. В общем самому мне не разобраться, подскажите, можно ли что-то сделать с начальной анимацией чтоб она работала нормально (без применения костылей на js, их я временно уже сам реализовал) и является ли данное поведение багом?
You can post now and register later.
If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке.
Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
Question
ows.nightwolf
В общем интересная штука нарисовалась. Вот пример. Есть элемент, который в процессе работы сайта неким образом перемещается, для его плавного перемещения используется свойство transition: transform; Именно transform т.к. оно не вызвыает repaint и reflow. Так же при загрузке страницы этот элемент должен выезжать. Для этого используется свойство animation, в @keyframes которой свойство transform изменяется from -100% to 0.
По идее при загрузке страницы animation должна запуститься, отработать независимо от заданного свойства transition, а уже потом в процесе работы сайта, когда элементу назначается какой-то класс изменяющий свойство transform, элемент должен перемещаться с учетом установленного свойства transition. Во всех браузерах так и есть, кроме FF. В фаерфоксе при первом запуске страницы свойства animation и transition "накладываются" друг на друга и вызывают глючное поведение элемента
В примере при первом запуске в FF видно, что элемент дважды анимируется. Кроме того я сделал две кнопки, вызывающие удаление и повторное добавление элемента на страницу (одна добавляет элемент сразу, вторая через пол секунды - для того чтобы исключить какое либо кеширование элемента браузером или еще что-то в этом роде, мало ли как браузер оптимизирует JS инструкции). И при новом добавлении элемента такого глюка уже нету. Само перемещение элемента (доступно при клике на него) работает как надо. В общем самому мне не разобраться, подскажите, можно ли что-то сделать с начальной анимацией чтоб она работала нормально (без применения костылей на js, их я временно уже сам реализовал) и является ли данное поведение багом?
Link to comment
Share on other sites
3 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.