Question

角度动画的工作方式如下：

<div *ngIf="show" [@slideThoughLeft] class="title-text">My title</div>

使用：

//a bit of js hiding title and revealing again a second later hence triggering animations

和：

export const slideThoughLeft = trigger(
  'slideThoughLeft',
  [
    transition(
      ':enter', [
        style({opacity: 0, transform: 'translateX(50%)'}),
        animate('500ms', style({opacity: 1, transform: 'translateX(0)'}))
      ]
    ),
    transition(
      ':leave', [
        style({opacity: 1, transform: 'translateX(0)'}),
        animate('500ms', style({ opacity: 0, transform: 'translateX(-50%)'}))
      ]
    )]
);

比通过您自己的js钩子和CSS创建的动画强大得多。

因此可以使用它们。

但是在使用路由器动画时，我已经能够为动画建立一套复杂的规则：

<main class="root routing" [@animRoutes]="getPage(o)">
  <router-outlet #o="outlet"></router-outlet>
</main>

与：

getPage(outlet){return outlet.activatedRouteData['page'] || 'one'}

和：

（我打算发布一个300行的长动画算法，然后我意识到它会阻止阅读，所以我将为您提供一些伪代码，让您可以利用它，并挖掘出自己的潜力：）

if route "home" to "contact" then slideUpFast
if route "contact" to "home" then slideDown
if route "home" to "about" then jumpIn
if route "contact" to "about" then slideDownSlow
Ect...

问题是路由器动画允许这种自由，但据我所知，常规角度动画尚不具备这种自由。

我尝试过：

<div [@animRoutes]="getPage()" class="title-text">My title</div>

使用：

getPage(){return this.store.path}

预先测试过，我的变量this.store.path返回的值与outlet.activatedRouteData['page']相同。

但这导致动画根本无法播放。

所以在路由动画中“砍”应该是有角度的动画是不可行的。

然后我研究了这种语法：

export const translateInAnimation = trigger(
  'translateInAnimation',
  [
    state('left', style({ transform: 'translateX(0)' })),
    state('right', style({ transform: 'translateX(-100%)' })),
    transition('left <=> right', animate('620ms ease-out'))]
);

这允许在两个状态之间进行转换。

如果我有两页，这可能会起作用，但是在这里，我需要为标题正确左右滑动设置动画，共有8页，我不知道该如何利用。

此语法也仅用于隐藏当前内容而不显示新内容，而且我不知道如何显示html以便将其用于我的上下文。

我想知道angular中是否有语法，允许我即时切换出角度动画。

在两个或多个Angular动画之间交替

0 个答案: