@ cardstack/ 视图- 过渡

启动本地视图过渡 API 动画的 Ember 工具 .

兼容性

• Ember.js v5.8或以上 (中文(简体) )
• 嵌入或嵌入自动导入 v2

安装

ember install @cardstack/view-transitions

使用量

你需要学习 查看过渡 API 来利用这个图书馆。 这个库提供了一些小的公用设施,使得在Ember应用中可以方便地使用 View Transits.

可模拟值

export function animatable<T>(
  initialValue: T,
  opts?: { equals?: (a: T, b: T) => boolean },
): Animatable<T>

export interface Animatable<T> {
  readonly current: T;
  set(newValue: T): void;
}

创建一个值,在视图转换时触发它. current 拨打时不会立即更新 set,改为 current 允许在“视图过渡”已经为“视图过渡”绘制“前”状态后更新.

import { animatable } from '@cardstack/view-transitions';

const expanded = animatable(false);

function toggleExpanded() {
  expanded.set(!expanded.current);
}

<template>
  <button {{on "click" toggleExpanded}}>Toggle</button>
  {{#if expanded.current}}
    <ExpandedContentHere />
  {{else}}
    <CollapsedContentHere />
  {{/if}}
</template>

可想象值也必然 tracked,用于与Ember其他部分的完全互操作性. 你可以像其他有轨电车状态一样消耗它们,并且会自动进行再接力,附加的奖金是重新接力之前和之后的DOM状态会被浏览器捕获并可以平稳地进行动画.

视图转换Name

设置 view-transition-name CSS财产. 可用于基于模型ID等程序指定独有名称. 接受任意数量的字符串或数字,并缩合它们形成视图-过渡-名称.

viewTransitionName: FunctionBasedModifier<{
  Args: {
      Positional: (string | number)[];
  };
  Element: HTMLElement;
}>;

import { viewTransitionName } from '@cardstack/view-transitions';
<template>
  {{#each @products as |product|}}
    <div {{viewTransitionName "product" product.id}}>
      {{product.title}}
    </div>
  {{/each}}
</template>

关键是理解 view-transition-name CSS属性是,它必须在整个页面上独有. 它既可以在DOM的"旧"和"新"状态中出现,但不能同时出现一次以上. 它控制了哪些元素在视图转换过程中被捕获(思考:"被截取"),以及新旧元素如何关联.

演示应用程序

这个repo包含一个演示应用程序. 运行它:

pnpm install
pnpm start

捐款

见 捐款 详细指南.

许可证

本项目根据以下规定获得许可证: MIT 许可证。 。 。 .