Question

export const slideInAnimation = trigger("routeAnimations", [
    transition("1 <=> 2", [
        style({ position: "relative" }),
        query(":enter, :leave", [
            style({
                    position: "absolute",
                    top: 0,
                    left: 0,
                    width: "100%"
                  })
               ]),
        query(":enter", [style({ left: "-100%" })]),
        query(":leave", animateChild()),
        group([
               query(":leave", [animate("300ms ease-out", style({ left: "100%" }))]),
               query(":enter", [animate("300ms ease-out", style({ left: "0%" }))])
              ]),
        query(":enter", animateChild())
       ])
]);

有人可以告诉我我做错了什么吗？我只是从文档中复制粘贴了此内容看起来只有劳特动画无法正常工作，使用状态的其余动画效果很好，我什至在触发器中尝试了 <=> 但没有使用该动画就无法正常工作

 prepareRoute(outlet: RouterOutlet) {
                                    return outlet.activatedRouteData["animation"];
                                    }

Answer 1

我成功了，动画没有触发子崩溃的原因，因为当我们从父路线导航到子崩溃时，：entry和：leave状态被加载，这是我从中篇文章中了解到的

Angular Route动画不起作用（我使用的是来自angular.io官方文档的示例动画）

1 个答案: