Css 角度-在管线更改时设置外部元素的动画
我有两个组件,它们在路由更改时已经有一个工作淡出/淡入动画,在页面加载时有一个从黑色背景淡入的外部背景图像(用css完成) app.component.html 我还试图在路线更改时使背景图像模糊/取消模糊。Css 角度-在管线更改时设置外部元素的动画,css,angular,angular-router,angular-animations,Css,Angular,Angular Router,Angular Animations,我有两个组件,它们在路由更改时已经有一个工作淡出/淡入动画,在页面加载时有一个从黑色背景淡入的外部背景图像(用css完成) app.component.html 我还试图在路线更改时使背景图像模糊/取消模糊。 这里是动画服务,我的逻辑是模糊动画应该是什么样子 fade.animation.ts import { Component } from '@angular/core'; import { fadeAnimation } from './fade.animation'; @Compone
这里是动画服务,我的逻辑是模糊动画应该是什么样子 fade.animation.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'];
}
}
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 })
])
]);
不确定我是否正确理解了这个问题 定义一个触发器模糊
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>
在这里检查一下。
<div class="bgImage" [@blur]="getDepth(myOutlet)" ></div>