Я заканчиваю свое веб-приложение и делаю его отзывчивым. Я столкнулся с одной последней проблемой, которую не могу решить!
У меня есть анимация для элемента, похожего на поповер, который скользит от Left до Right на рабочем столе.
На мобильном устройстве недостаточно места, поэтому я сделаю этот элемент открытым под полем ввода, а не сбоку, поэтому мне нужна анимация, которая перемещается от Bottom до Top.
Это код для анимации по умолчанию, который я использую для экранов рабочего стола:
animations: [
trigger("slideInOut", [
transition(":enter", [
style({ transform: "translateX(60%)", opacity: 0 }),
animate(
"300ms ease-in",
style({ transform: "translateX(0%)", opacity: 1 })
),
]),
transition(":leave", [
animate(
"300ms ease-in",
style({ transform: "translateX(60%)", opacity: 0 })
),
]),
]),
]
и единственное, что я хочу изменить, - это 3 значения для transform
Для мобильных устройств мне потребуется:
translateY(60%)
translateY(0%)
translateY(60%)
поэтому просто поменяйте местами ось X с Y!
Как мне этого добиться? Если невозможно изменить эти значения, даже отключение анимации для мобильных устройств будет работать!
Я думал о решении, но он грязный, очень грязный! По сути, я бы создал копию своего «DIV-подобного DIV», затем на обоих из них шлепнул класс, например:
.mobile
.desktop
Затем, основываясь на медиазапросах, я бы отобразил один или другой, и, наконец, для каждого из них, я бы прикрепил другой триггер анимации, и я бы объявил оба триггера в моем компоненте, один для оси Y и один для оси X. Это должно работать, но мне это совсем не нравится!