addModern() — astro Function Reference

Architecture documentation for the addModern() function in transition.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine calls 1 called by 2

Entity Profile

CoreAstro→ RenderingEngine→ addModern() — astro Function Reference

Dependency Diagram

graph TD
  066351a7_c283_6d13_ba2b_260df1d0fe47["addModern()"]
  d7cc381c_9294_21bb_a466_854d22d9bf61["ViewTransitionStyleSheet"]
  066351a7_c283_6d13_ba2b_260df1d0fe47 -->|defined in| d7cc381c_9294_21bb_a466_854d22d9bf61
  76c15535_9f6b_845e_9f22_f5c86e52ea7b["renderTransition()"]
  76c15535_9f6b_845e_9f22_f5c86e52ea7b -->|calls| 066351a7_c283_6d13_ba2b_260df1d0fe47
  27976e4d_cb29_8c73_4a03_b05d48d34065["addAnimationRaw()"]
  27976e4d_cb29_8c73_4a03_b05d48d34065 -->|calls| 066351a7_c283_6d13_ba2b_260df1d0fe47
  80c6564a_bf5c_0a79_226b_9b6d8ff8c1e3["addRule()"]
  066351a7_c283_6d13_ba2b_260df1d0fe47 -->|calls| 80c6564a_bf5c_0a79_226b_9b6d8ff8c1e3
  style 066351a7_c283_6d13_ba2b_260df1d0fe47 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/server/transition.ts lines 164–167

	addModern(image: 'old' | 'new' | 'group', animation: string) {
		const { name } = this;
		this.addRule('modern', `::view-transition-${image}(${name}) { ${animation} }`);
	}