Angular 4 动画正确执行左、右、上、下，但不适用于变换（translateX、translateY、translateZ）

Question

我正在尝试使用 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 错误。

任何帮助都会是超级超级棒:)

Answer 1

我想你忘了添加 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';