如何在Angular 4路由切换时实现屏幕旋转动画效果？

我帮你把AngularJS示例里的屏幕翻转动画适配到Angular 4中，下面是完整的实现步骤和代码：

1. 启用Angular动画模块 #

Angular 4的动画依赖BrowserAnimationsModule，先在根模块中导入它：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { Page1Component } from './page1.component';
import { Page2Component } from './page2.component';

const routes: Routes = [
  { path: 'one', component: Page1Component },
  { path: 'two', component: Page2Component },
  { path: '', redirectTo: '/one', pathMatch: 'full' }
];

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(routes)
  ],
  declarations: [
    AppComponent,
    Page1Component,
    Page2Component
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 定义路由翻转动画 #

在AppComponent里用Angular动画API实现翻转效果，支持方向控制（对应原示例的direction函数）：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('routeFlipAnimation', [
      state('front', style({ transform: 'rotateY(0deg)', opacity: 1 })),
      state('back', style({ transform: 'rotateY(180deg)', opacity: 1 })),
      // 正面转背面的过渡动画
      transition('front => back', [
        style({ transform: 'rotateY(0deg)', opacity: 1 }),
        animate('0.6s ease-in-out', style({ transform: 'rotateY(180deg)', opacity: 0 }))
      ]),
      // 背面转正面的过渡动画
      transition('back => front', [
        style({ transform: 'rotateY(180deg)', opacity: 1 }),
        animate('0.6s ease-in-out', style({ transform: 'rotateY(0deg)', opacity: 0 }))
      ])
    ])
  ]
})
export class AppComponent implements OnInit {
  currentAnimationState = 'front';

  constructor(private router: Router) {}

  ngOnInit() {
    // 监听路由切换，自动同步动画状态
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.currentAnimationState = this.router.url.includes('two') ? 'back' : 'front';
      }
    });
  }

  // 统一的页面跳转方法
  goTo(path: string, direction: string) {
    this.currentAnimationState = direction;
    this.router.navigate([path]);
  }
}

3. 根组件模板配置 #

对应原示例的容器结构，在app.component.html中绑定动画到路由出口：

<div class="cube container">
  <router-outlet [@routeFlipAnimation]="currentAnimationState"></router-outlet>
</div>

4. 页面组件实现 #

Page1Component（对应原page1.html） #

组件类：

import { Component } from '@angular/core';
import { AppComponent } from '../app.component';

@Component({
  templateUrl: './page1.component.html'
})
export class Page1Component {
  constructor(private appComp: AppComponent) {}

  goToPage2() {
    this.appComp.goTo('/two', 'back');
  }
}

模板page1.component.html：

<div class="container">
  <div class="masthead">
    <h1 class="muted">PAGE 1</h1>
    <button class="btn display-button" (click)="goToPage2()">Go Page 2</button>
  </div>
</div>

Page2Component（对应原page2.html） #

组件类：

import { Component } from '@angular/core';
import { AppComponent } from '../app.component';

@Component({
  templateUrl: './page2.component.html'
})
export class Page2Component {
  constructor(private appComp: AppComponent) {}

  goToPage1() {
    this.appComp.goTo('/one', 'front');
  }
}

模板page2.component.html：

<div class="container">
  <div class="masthead">
    <h1 class="muted">PAGE 2</h1>
    <button class="btn display-button" (click)="goToPage1()">Go Page 1</button>
  </div>
</div>

5. 添加3D透视样式 #

最后加上CSS实现立方体容器的3D效果：

.cube.container {
  position: relative;
  width: 100%;
  height: 100vh;
  perspective: 1000px; /* 开启3D透视 */
  overflow: hidden;
}

router-outlet ~ * {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 隐藏背面元素 */
  top: 0;
  left: 0;
}

.masthead {
  text-align: center;
  padding: 2rem;
}

.muted {
  color: #666;
}

.btn.display-button {
  padding: 0.5rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
}

效果说明 #

这个实现完全还原了你提到的AngularJS示例效果：

• 页面1跳转到页面2时，屏幕沿Y轴翻转到背面
• 返回页面1时，屏幕翻转回正面
• 通过perspective和backface-visibility属性实现真实的3D翻转体验

内容的提问来源于stack exchange，提问作者Aditi Malhotra