Angular - анимация внешнего элемента при изменении маршрута - PullRequest
Новая
       30

Angular - анимация внешнего элемента при изменении маршрута

0 голосов
/ 05 октября 2018

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

app.component.html 

<div class="bg"></div>
<div class="bgImage"></div>
<div class="main" [@fadeAnimation]="getDepth(myOutlet)">
  <router-outlet #myOutlet="outlet"></router-outlet>
</div>

app.component.ts 

import { Component } from '@angular/core';
import { fadeAnimation } from './fade.animation';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
  ,  animations: [fadeAnimation]
})
export class AppComponent {
  title = 'app';

  getDepth(outlet){
    return outlet.activatedRouteData['depth'];
  }
}

Я пытаюсьтакже сделайте фоновое изображение размытым / размытым при изменении маршрута.
Вот сервис анимации с моей логикой для того, чтобы анимация размытия выглядела как удаленная.

fade.animation.ts 

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

export const fadeAnimation =
    trigger('fadeAnimation', [
        transition( '1 => 2', [
            query(':enter', 
                [
                    style({ opacity: 0 })
                ], 
                { optional: true }),
        // query('.bgImage', 
        //     [
        //         style({ filter: 'blur(0px)' }),
        //         animate('1s ease-in-out', style({ filter: 'blur(5px)' }))
        //     ], 
        //     { optional: true }
        // ),
            query(':leave', 
                [
                    style({ opacity: 1 }),
                    animate('0.25s ease-in-out', style({ opacity: 0 }))
                ], 
                { optional: true }),
            query(':enter', 
                [
                    style({ opacity: 0 }),
                    animate('0.25s ease-in-out', style({ opacity: 1 }))
                ], 
                { optional: true })
        ]),
        transition( '2 => 1', [
            query(':enter', 
                [
                    style({ opacity: 0 })
                ], 
                { optional: true }),
        // query('.bgImage', 
        //     [
        //         style({ filter: 'blur(5px)' }),
        //         animate('1s ease-in-out', style({ filter: 'blur(0px)' }))
        //     ], 
        //     { optional: true }
        // ),
            query(':leave', 
                [
                    style({ opacity: 1 }),
                    animate('0.25s ease-in-out', style({ opacity: 0 }))
                ], 
                { optional: true }),
            query(':enter', 
                [
                    style({ opacity: 0 }),
                    animate('0.25s ease-in-out', style({ opacity: 1 }))
                ], 
                { optional: true })
        ])
    ]);

1 Ответ

0 голосов
/ 18 февраля 2019

Не уверен, правильно ли я понял вопрос.

Определите триггер размытие . 

trigger('blur', [
      state('1', style({filter: 'blur(0px)'})),
      state('2', style({filter: 'blur(8px)'})),
      transition('1=>2', [ animate('1s')]),
      transition('2=>1', [ animate('1s')])
    ])

И в HTML: 

<div class="bgImage" [@blur]="getDepth(myOutlet)" ></div>

проверьте это здесь.https://stackblitz.com/edit/angular7-material-primeng-template-31yvug

...