Ember路由过渡与动画 #

当前路由 deactivate
    ↓
新路由 beforeModel
    ↓
新路由 model
    ↓
新路由 afterModel
    ↓
新路由 setupController
    ↓
新路由 activate

import Route from '@ember/routing/route';
import { action } from '@ember/object';

export default class EditRoute extends Route {
  @action
  willTransition(transition) {
    if (this.controller.hasUnsavedChanges) {
      const confirmed = confirm('有未保存的更改，确定离开吗？');
      if (!confirmed) {
        transition.abort();
      }
    }
  }
}

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default class ProtectedRoute extends Route {
  @service session;

  beforeModel(transition) {
    if (!this.session.isAuthenticated) {
      // 保存目标过渡
      this.session.set('attemptedTransition', transition);
      this.transitionTo('login');
    }
  }
}

// 登录成功后重试
@action
loginSuccess() {
  const transition = this.session.attemptedTransition;
  if (transition) {
    transition.retry();
  } else {
    this.router.transitionTo('home');
  }
}

import Route from '@ember/routing/route';

export default class ApplicationRoute extends Route {
  @action
  willTransition(transition) {
    console.log('从:', transition.from?.name);
    console.log('到:', transition.to.name);
    console.log('参数:', transition.to.params);
    console.log('查询参数:', transition.to.queryParams);
  }
}

// app/routes/posts.js
import Route from '@ember/routing/route';

export default class PostsRoute extends Route {
  async model() {
    // 模拟慢速加载
    await new Promise((resolve) => setTimeout(resolve, 2000));
    return this.store.findAll('post');
  }
}

{{! app/templates/posts-loading.hbs}}
<div class="loading-state">
  <div class="spinner"></div>
  <p>加载中...</p>
</div>

// app/routes/posts.js
import Route from '@ember/routing/route';

export default class PostsRoute extends Route {
  async model() {
    const response = await fetch('/api/posts');
    if (!response.ok) {
      throw new Error('加载失败');
    }
    return response.json();
  }
}

{{! app/templates/posts-error.hbs}}
<div class="error-state">
  <h2>出错了</h2>
  <p>{{@model.message}}</p>
  <button {{on "click" this.retry}}>重试</button>
</div>

/* app/styles/app.css */
.page-enter {
  opacity: 0;
  transform: translateX(20px);
}

.page-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms, transform 300ms;
}

.page-exit {
  opacity: 1;
  transform: translateX(0);
}

.page-exit-active {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 300ms, transform 300ms;
}

ember install ember-animated

// app/routes/posts.js
import Route from '@ember/routing/route';
import AnimatedRoute from 'ember-animated/mixins/animated-route';
import { fadeSlide } from '../animations/transition';

export default class PostsRoute extends Route.extend(AnimatedRoute) {
  model() {
    return this.store.findAll('post');
  }

  animation = fadeSlide;
}

// app/animations/transition.js
import { fadeOut, fadeIn } from 'ember-animated/motions/opacity';
import { move } from 'ember-animated/motions/move';

export function* fadeSlide({ insertedSprites, keptSprites, removedSprites }) {
  for (let sprite of removedSprites) {
    yield fadeOut(sprite);
  }

  for (let sprite of insertedSprites) {
    sprite.startAtPixel({ x: 20 });
    yield fadeIn(sprite);
  }

  for (let sprite of keptSprites) {
    yield move(sprite);
  }
}

// app/components/animated-list.js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import Animated from 'ember-animated/mixins/animated-component';
import { fadeSlide } from '../animations/transition';

export default class AnimatedListComponent extends Component {
  animation = fadeSlide;

  @tracked items = [];

  @action
  addItem() {
    this.items = [...this.items, { id: Date.now() }];
  }
}

{{! app/components/animated-list.hbs}}
<button {{on "click" this.addItem}}>添加</button>

<AnimatedContainer>
  {{#animated-each this.items use=this.animation as |item|}}
    <div class="item">{{item.id}}</div>
  {{/animated-each}}
</AnimatedContainer>

// app/routes/application.js
import Route from '@ember/routing/route';
import { action } from '@ember/object';

export default class ApplicationRoute extends Route {
  @action
  willTransition(transition) {
    // 所有路由过渡前执行
    console.log('即将过渡');
  }

  @action
  didTransition() {
    // 过渡完成后执行
    console.log('过渡完成');
    window.scrollTo(0, 0);
  }
}

// app/routes/posts.js
import Route from '@ember/routing/route';
import { action } from '@ember/object';

export default class PostsRoute extends Route {
  @action
  willTransition(transition) {
    // 离开posts路由时执行
  }

  @action
  didTransition() {
    // 进入posts路由后执行
  }
}

// app/services/loading.js
import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class LoadingService extends Service {
  @tracked isLoading = false;
  @tracked progress = 0;

  start() {
    this.isLoading = true;
    this.progress = 0;
  }

  update(value) {
    this.progress = value;
  }

  complete() {
    this.progress = 100;
    setTimeout(() => {
      this.isLoading = false;
    }, 300);
  }
}

// app/routes/application.js
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class ApplicationRoute extends Route {
  @service loading;

  @action
  willTransition() {
    this.loading.start();
  }

  @action
  didTransition() {
    this.loading.complete();
  }
}

{{! app/templates/application.hbs}}
{{#if this.loading.isLoading}}
  <div class="loading-bar" style="width: {{this.loading.progress}}%"></div>
{{/if}}

{{outlet}}

ember install ember-page-title

{{! app/templates/posts/show.hbs}}
<PageTitle>{{@model.title}} - 我的博客</PageTitle>

<h1>{{@model.title}}</h1>

// app/routes/posts/show.js
import Route from '@ember/routing/route';

export default class PostsShowRoute extends Route {
  afterModel(model) {
    document.title = `${model.title} - 我的博客`;
  }
}

// app/routes/application.js
import Route from '@ember/routing/route';
import { action } from '@ember/object';

export default class ApplicationRoute extends Route {
  @action
  didTransition() {
    window.scrollTo(0, 0);
  }
}

// app/services/scroll-position.js
import Service from '@ember/service';

export default class ScrollPositionService extends Service {
  positions = {};

  save(routeName) {
    this.positions[routeName] = window.scrollY;
  }

  restore(routeName) {
    const position = this.positions[routeName] || 0;
    window.scrollTo(0, position);
  }
}

{{! 好的做法 - 提供有意义的加载状态}}
<div class="loading-state">
  <div class="skeleton-card"></div>
  <div class="skeleton-card"></div>
  <div class="skeleton-card"></div>
</div>

{{! 避免 - 简单的加载文字}}
<div>加载中...</div>

// 使用CSS过渡
.page-container {
  transition: opacity 0.3s ease;
}

.page-container.loading {
  opacity: 0.5;
}

// 添加最小加载时间
async model() {
  const [data] = await Promise.all([
    this.store.findAll('post'),
    new Promise((resolve) => setTimeout(resolve, 300)),
  ]);
  return data;
}