Показать или скрыть div слева, используя Angular Animation - PullRequest
Новая
       23

Показать или скрыть div слева, используя Angular Animation

0 голосов
/ 27 октября 2019

Я показываю диалоговое окно с высотой и шириной 600 пикселей.

У меня есть кнопка в диалоговом окне. Когда я нажимаю на кнопку, я хочу показать левый скользящий элемент div с левой стороны диалогового окна, не затрагивая диалоговое окно.

Как я могу это сделать?

1 Ответ

1 голос
/ 28 октября 2019

Вы можете сделать это двумя способами.

Использование угловой анимации

Stackblitz: https://stackblitz.com/edit/angular-azjfgh

Angular предоставляет наборы методов длясделать что-нибудь классное. В этом примере я написал, что: 

animations: [
        trigger('widthGrow', [
            state('closed', style({
                width: 0,
            })),
            state('open', style({
                width: 400
            })),
            transition('* => *', animate(150))
        ]),
    ]

trigger -> имя триггера, который мы хотим зарегистрировать и использовать в html

состояние -> два состояния, которые мы будем использовать для изменения нашего div.

style -> свойство css, которое мы хотим изменить на основе нашей логики.

transition -> простой таймер, который оживит рост div.

Если вы откроете стекаблиц, вы увидите, как он работает. Я использовалеще один div для запуска функции с именем changeState для изменения свойства для его анимации.

Использование только css

Stackblitz: https://stackblitz.com/edit/angular-lpjqnd

Используя transition (родной от css) и ngClass, вы можете достичь того же.

Поскольку это просто базовый код, я просто помещаю здесь класс css: 

.left-stuff {
  height: 50px;
  border: 1px solid black;
  transition: all 0.2s ease-in-out;
  background-color: red;
}

Если вам нужна дополнительная помощь, не стесняйтесь комментировать этот ответ.

...