Angular 4 个动画可以正确执行左、右、上、下但不适用于转换(translateX、translateY、translateZ)
Angular 4 animation does left, right, top, bottom correctly but does not work for transforms (translateX,translateY,translateZ)
我正在尝试使用 angular 4.1.2 使用伪 :enter
、:leave
状态更改表达式使用 3D CSS 表达式来制作路由器转换动画。
阅读关于此的 angular.io 文档,其中描述了 void => *
和 * => void
用于 :enter
和 :leave
伪转换。
在尝试从 this post 进行 slide in out
转换后,我最终可以通过在我的组件 css 文件中设置 :host {postion:relative}
来让它工作(应该让作者知道)。
这有效:
trigger('routerAnimation', [
transition(':enter', [
style({ right: '-400%' }),
animate('.2s ease-in-out', style({ right: 0 }))
]),
transition(':leave', [
animate('.2s ease-in-out', style({ right: '-400%' }))
])
]);
这不是:
trigger('routerAnimation', [
transition(':enter', [
style({ transform: 'translateZ(-400px)' }),
animate('.2s ease-in-out', style({ transform: 'translateZ(0)' }))
]),
transition(':leave', [
style({ transform: 'translateZ(0)' }),
animate('.2s ease-in-out', style({ transform: 'translateZ(-400px)' }))
])
]);
我真的很困惑为什么会这样,我还尝试将我的 :host
定位从 relative
设置为 absolute
只是为了确保我没有做 CSS错误。
任何帮助都会非常棒 :)
我想你忘了添加 transform: perspective(XXXpx);
这就是为什么您看不到 translateZ 效果的原因。
我尝试使用这样的动画:
import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core';
// Component transition animations
export const slideInDownAnimation: AnimationEntryMetadata =
trigger('routeAnimation', [
state('*',
style({
opacity: 1,
transform: 'perspective(500px) translateZ(0px)',
})
),
transition(':enter', [
style({
opacity: 0,
transform: 'perspective(500px) translateZ(-400px)',
}),
animate('10s ease')
]),
transition(':leave', [
animate('10s ease', style({
opacity: 0,
transform: 'perspective(500px) translateZ(-400px)',
}))
])
]);
而且效果很好。
检查此以查找有关 translateZ 的更多信息:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d
如果您的组件比屏幕大,您将看不到动画,或者您需要滚动页面才能找到它。所以在大多数情况下,您需要将 position:absolute 添加到组件 CSS (对于 :host 选择器)。或者你可以添加这样的修饰属性:
@HostBinding('@routeAnimation') public routeAnimation = true;
@HostBinding('style.display') display = 'block';
@HostBinding('style.position') position = 'absolute';
别忘了补充:
import {HostBinding} from '@angular/core';
我正在尝试使用 angular 4.1.2 使用伪 :enter
、:leave
状态更改表达式使用 3D CSS 表达式来制作路由器转换动画。
阅读关于此的 angular.io 文档,其中描述了 void => *
和 * => void
用于 :enter
和 :leave
伪转换。
在尝试从 this post 进行 slide in out
转换后,我最终可以通过在我的组件 css 文件中设置 :host {postion:relative}
来让它工作(应该让作者知道)。
这有效:
trigger('routerAnimation', [
transition(':enter', [
style({ right: '-400%' }),
animate('.2s ease-in-out', style({ right: 0 }))
]),
transition(':leave', [
animate('.2s ease-in-out', style({ right: '-400%' }))
])
]);
这不是:
trigger('routerAnimation', [
transition(':enter', [
style({ transform: 'translateZ(-400px)' }),
animate('.2s ease-in-out', style({ transform: 'translateZ(0)' }))
]),
transition(':leave', [
style({ transform: 'translateZ(0)' }),
animate('.2s ease-in-out', style({ transform: 'translateZ(-400px)' }))
])
]);
我真的很困惑为什么会这样,我还尝试将我的 :host
定位从 relative
设置为 absolute
只是为了确保我没有做 CSS错误。
任何帮助都会非常棒 :)
我想你忘了添加 transform: perspective(XXXpx);
这就是为什么您看不到 translateZ 效果的原因。
我尝试使用这样的动画:
import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core';
// Component transition animations
export const slideInDownAnimation: AnimationEntryMetadata =
trigger('routeAnimation', [
state('*',
style({
opacity: 1,
transform: 'perspective(500px) translateZ(0px)',
})
),
transition(':enter', [
style({
opacity: 0,
transform: 'perspective(500px) translateZ(-400px)',
}),
animate('10s ease')
]),
transition(':leave', [
animate('10s ease', style({
opacity: 0,
transform: 'perspective(500px) translateZ(-400px)',
}))
])
]);
而且效果很好。
检查此以查找有关 translateZ 的更多信息:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d
如果您的组件比屏幕大,您将看不到动画,或者您需要滚动页面才能找到它。所以在大多数情况下,您需要将 position:absolute 添加到组件 CSS (对于 :host 选择器)。或者你可以添加这样的修饰属性:
@HostBinding('@routeAnimation') public routeAnimation = true;
@HostBinding('style.display') display = 'block';
@HostBinding('style.position') position = 'absolute';
别忘了补充:
import {HostBinding} from '@angular/core';