Угловая анимация скольжения вниз и вверх

Question

Я пытаюсь сделать простую анимацию слайдов вверх и вниз в Angular, но у меня есть проблема.

Вот HTML:

<div class="container" style="width: 228px">
  <a href="#" (click)=onDropDown()>
    <h3>Label</h3>
  </a>
  <ul [@dropDown]="state" class="menu">
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
    <li><a href="#">Text</a></li>
  </ul>
</div>
<hr [@slideUpDown]='state'>

и мой файл TypeScript:

import { Component, OnInit, HostListener } from '@angular/core';
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';


@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss'],
  animations: [
    trigger('dropDown', [
      state('hide', style({
        display: 'none',
        opacity: 0
      })),
      state('show', style({
        display: 'block',
        opacity: 1
      })),
      transition('hide => show', animate('300ms ease-out')),
      transition('show => hide', animate('300ms ease-in'))
    ]),
    trigger('slideUpDown', [
      state('hide', style({
        transform: 'translateY(0)'
      })),
      state('show', style({
        transform: 'translateY(0)'
      })),
      transition('hide => show', animate('300ms ease-out')),
      transition('show => hide', animate('300ms ease-in'))
    ]),
  ]
})
export class FooterComponent implements OnInit {

  state = 'hide';

  constructor() {  }

  ngOnInit() {
  }

  onDropDown(){
    this.state == 'hide' ? this.state = 'show' : this.state = 'hide';
  }
}

То, что мои шоу мне подходят. Проблема в том, что я хочу анимировать горизонтальную линию, но поскольку она все еще находится в одной позиции, я не могу анимировать ее с помощью свойства transform.

Как мне сделать так, чтобы оно плавно скользило вверх и вниз?

Должен ли я закрыть его за один div и оживить высоту родительского div?

Спасибо!

Answer 1

После ваших комментариев

Когда вы создаете анимацию, как вы делали, вы объявляете states : состояния ... Ну, состояния (дух), которые будут применены к элементам при данном условии.

Итак, когда вы пишете это

state('hide', style({
  transform: 'translateY(0)'
}))

Вы имеете в виду

Мой компонент не должен переводиться по оси Y, если моя переменная равна hide

Это означает, что вы можете написать свои состояния следующим образом

  state('hide', style({
    transform: 'translateY(100vh)'
  })),
  state('show', style({
    transform: 'translateY(0)'
  })),

элемент покинет окно, когда его попросят скрыть, и вернется, когда его попросят показать.

А если у вас уже есть значение для преобразования, пусть Angular обработает его

  state('hide', style({
    transform: 'translateY(100vh)'
  })),
  state('show', style({
    transform: '*'
  })),