Вопрос:
У меня есть контейнер div с overflow:hidden который меняет местами между двумя картами, только с одним видимым за раз:
[card 1 | card 2]
У меня установлен jquery, так что, когда пользователь нажимает кнопку, он переключает класс, .slid, на div, с стилусом, который меняет свой параметр margin-left на -400 или около того.
.container &.slid { margin-left: -400px;
Все это работает; всякий раз, когда вы нажимаете кнопку, карты переворачиваются взад и вперед.
Я хотел написать анимацию, чтобы карты сдвигались туда и обратно, поэтому я изменил свой стилус на
.container{ animation: slideout 1s; &.slid { margin-left: -400px; animation: slidein 1s; }
с соответствующими анимациями:
@keyframes slidein { from { margin-left: 0px; } to { margin-left: -400px } } @keyframes slideout { from { margin-left: -400px; } to { margin-left: 0px; } }
Это также работает более или менее по назначению, но у меня есть одна проблема: поскольку код стилуса настроен на запуск анимации при загрузке, обновление страницы запускает анимацию slideout при загрузке страницы. Есть ли способ вокруг этого легко, что все еще сохраняет анимацию, скользящую назад и вперед?
Лучший ответ:
На мой взгляд, я считаю, что вместо применения анимации слайдов к контейнеру и переключения приложения одного класса.slid, который определяет анимацию слайдов, вы должны сделать следующее:
1- Не применять анимацию непосредственно к классу контейнера.
2- Определите два класса.slid-in (ваш текущий.slid) и.slid-out, которые определяют анимацию слайдов и слайдов соответственно. Что-то вроде:
.container{ &.slid-in { margin-left: -400px; animation: slidein 1s; } &.slid-out { margin-left: 0px; animation: slideout 1s; } }
3- Обновите свой код, чтобы применить класс.slid-in при первом нажатии кнопки и затем переключиться между.slid-in и.slid-out.
Делая это таким образом, вы предотвращаете применение анимации слайда при загрузке страницы, так как класс.container применяется сразу же, как выведено из вашего объяснения.
Ответ №1
Вы можете повлиять на порядок загрузки CSS, просто разместив его в нижней части страницы. Это обеспечит загрузку html до применения CSS. Конечно, если вы приносите вещи с помощью javascript или AJAX, это не будет пуленепробиваемым решением. Это должно быть нормально, если все элементы находятся в самом html.
Надеюсь, это поможет!
