Как добавить переход анимации для конкретного устройства на элементе при отображении/скрытии с помощью *ngIf ⇐ CSS

[Anonymous]

Я пытаюсь добиться двух вариантов перехода анимации в зависимости от размера экрана в угловом компоненте при отображении и скрытии:

• размер экрана: средний экран и ниже – проведите по экрану снизу.
• размер экрана: выше среднего экрана – проведите по экрану вправо.

Мне нужна анимация при загрузке и сокрытии div с классом login-content зависит значение *ngIf

Код: Выделить всё

large content
Toggle





medium content
 show/hide


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pharetra enim justo, fermentum ultrices augue porta dignissim. Ut faucibus faucibus lorem nec commodo.

Случай 1
Я использовал обычную CSS-анимацию медиа-запроса для загрузки div

Код: Выделить всё

    .login-content{

animation: slideInFromRight 1s;
border: 1px solid rgba(30, 51, 53, 0.2);
box-shadow:
0 -5px 8px rgb(0 0 0 / 25%),
-4px 4px 4px rgba(15, 20, 28, 0.1);
border-radius: 2px;
background-color: #ffffff;
}
@media (max-width: 992px){
.md-graphic-content {
display: block !important;
background-color: #e1f5fe;
// background-color: #02fefa;
}
.login-content{
position: fixed;
bottom: 0;
animation: slideInFromBottom 1s;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
}
}
@media (min-width: 992px){
.md-graphic-content {
display: none !important;
}
.login-content{
min-height: 100vh;
}
}

Это будет работать в зависимости от нагрузки и конкретного устройства. Но не работает, когда мы скрываемся с помощью ngIf
Случай-2
Когда я использую Angular анимацию в метаданные, как показано ниже

Код: Выделить всё

  animations: [
trigger('fadeInOut', [
transition(':enter', [
animate('0.5s', style({ animation: 'slideOutToBottom' })) // Using CSS keyframes directly
]),
transition(':leave', [
animate('0.5s ease-in-out', style({ animation: 'slideInFromBottom' }))
])

])
]

При этом я вижу анимацию при загрузке и скрытии, но я не могу добиться разной анимации для экрана ниже среднего и выше среднего

• Можно ли добиться перехода в зависимости от устройства с помощью Angular Animation?
• Можно ли добавить анимацию с использованием стилей CSS (без Angular Animation) для div при показе/скрытии на *ngIf?
• Есть ли альтернатива для достижения этого в Angular?

Я ищу решение, которое может выполнять как

• анимацию при загрузке, так и скрытие с помощью *ngIf
• Анимация должна быть учитывайте особенности устройства.

Я очень ценю ваши предложения.

Подробнее здесь: https://stackoverflow.com/questions/782 ... w-hide-usi