где-то еще или в шаблоне вы можете переключать состояние.

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

<div class="wrapper">
  <button (click)="animated = !animated"></button>
  <div *ngIf="animated" [@slideInOutAnimation] class="animated-div">
  THIS DIV IS ANIMATED</div>

  <div class="content">THIS IS CONTENT DIV</div>

</div>

TYPESCRIPT:
animations: [
trigger('slideInOutAnimation', [

  state('*', style({

  })),
  transition(':enter', [
    style({
      transform: 'translateY(-10%)',
      opacity: 0
    }),
    animate('.5s ease-in-out', style({
      transform: 'translateY(0)',
      opacity: 1
    }))
  ]),
  transition(':leave', [
    animate('.5s ease-in-out', style({
      transform: 'translateY(-10%)',
      opacity: 0
    }))
  ])
])
]

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

Ответы на вопрос(2)

Решение Вопроса

в котором вы будете определять свои анимации и экспортировать их. Просто чтобы сделать это более понятным в вашем app.component.ts

В следующем примере я использовал максимальную высоту div, которая идет от 0px (когда она скрыта) до 500px, но вы изменили бы это в соответствии с тем, что вам нужно.

Эта анимация использует состояния (в и из), которые будут переключаться, когда мы нажимаем на кнопку, которая запускает анимацию.

animations.ts

import { trigger, state, style, transition,
    animate, group, query, stagger, keyframes
} from '@angular/animations';

export const SlideInOutAnimation = [
    trigger('slideInOut', [
        state('in', style({
            'max-height': '500px', 'opacity': '1', 'visibility': 'visible'
        })),
        state('out', style({
            'max-height': '0px', 'opacity': '0', 'visibility': 'hidden'
        })),
        transition('in => out', [group([
            animate('400ms ease-in-out', style({
                'opacity': '0'
            })),
            animate('600ms ease-in-out', style({
                'max-height': '0px'
            })),
            animate('700ms ease-in-out', style({
                'visibility': 'hidden'
            }))
        ]
        )]),
        transition('out => in', [group([
            animate('1ms ease-in-out', style({
                'visibility': 'visible'
            })),
            animate('600ms ease-in-out', style({
                'max-height': '500px'
            })),
            animate('800ms ease-in-out', style({
                'opacity': '1'
            }))
        ]
        )])
    ]),
]

Затем в вашем app.component мы импортируем анимацию и создаем метод, который будет переключать состояние анимации.

app.component.ts

import { SlideInOutAnimation } from './animations';

@Component({
  ...
  animations: [SlideInOutAnimation]
})
export class AppComponent  {
  animationState = 'in';

  ...

  toggleShowDiv(divName: string) {
    if (divName === 'divA') {
      console.log(this.animationState);
      this.animationState = this.animationState === 'out' ? 'in' : 'out';
      console.log(this.animationState);
    }
  }
}

А вот как твойapp.component.html будет выглядеть так:

<div class="wrapper">
  <button (click)="toggleShowDiv('divA')">TOGGLE DIV</button>
  <div [@slideInOut]="animationState" style="height: 100px; background-color: red;">
  THIS DIV IS ANIMATED</div>
  <div class="content">THIS IS CONTENT DIV</div>
</div>

slideInOut ссылается на триггер анимации, определенный в animations.ts

Вот пример StackBlitz, который я создал:https://stackblitz.com/edit/angular-muvaqu

Примечание: если когда-либо возникает ошибка, и просит вас добавитьBrowserAnimationsModule, просто импортируйте его в ваш app.module.ts:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [ ..., BrowserAnimationsModule ],
  ...
})
 Felix06 апр. 2018 г., 14:38
видетьВот для другого решения
 crush20 сент. 2018 г., 04:18
Вау, это действительно помогло создать общую библиотеку анимаций, которой можно поделиться на нашем сайте. Спасибо за это. Мы закончили тем, что сделали эти фабричные функции, чтобы мы могли настроить каждую анимацию немного по-другому.

дами по высоте, чтобы обеспечить динамический контент по высоте.

// Bind to true/false states via 0 and 1 values

trigger('slideUpDown', [
  state('0', style({ 'max-height': '*', opacity: 1 })),
  state('1', style({ 'max-height': '0px', opacity: 0 })),
  transition(':enter', animate('400ms ease-in-out')),
  transition('* => *', animate('400ms ease-in-out')),
])

использование:

<div #someDiv [@slideUpDown]="someDiv.state"></div>

где-то еще или в шаблоне вы можете переключать состояние.

<button (click)="someDiv.state = !someDiv.state"></button>

Ваш ответ на вопрос