react Architecture Docs
Home / File/ Transitions.module.css — react Source File

Transitions.module.css — react Source File

Architecture documentation for Transitions.module.css, a css file in the react codebase. 0 imports, 1 dependents.

File css BabelCompiler 1 dependents

Entity Profile

Dependency Diagram

graph LR
  9bd727a3_4203_abe8_fa8c_0cb9a59d2881["Transitions.module.css"]
  ef975ced_d6a7_b295_dbfc_38e701d92f78["Page.js"]
  ef975ced_d6a7_b295_dbfc_38e701d92f78 --> 9bd727a3_4203_abe8_fa8c_0cb9a59d2881
  style 9bd727a3_4203_abe8_fa8c_0cb9a59d2881 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

@keyframes enter-slide-right {
  0% {
    opacity: 0;
    translate: -200px 0;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes enter-slide-left {
  0% {
    opacity: 0;
    translate: 200px 0;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes exit-slide-right {
  0% {
    opacity: 1;
    translate: 0 0;
  }
  100% {
    opacity: 0;
    translate: 200px 0;
  }
}

@keyframes exit-slide-left {
  0% {
    opacity: 1;
    translate: 0 0;
  }
  100% {
    opacity: 0;
    translate: -200px 0;
  }
}

::view-transition-new(.slide-right) {
  animation: enter-slide-right ease-in 0.25s;
}
::view-transition-old(.slide-right) {
  animation: exit-slide-right ease-in 0.25s;
}
::view-transition-new(.slide-left) {
  animation: enter-slide-left ease-in 0.25s;
}
::view-transition-old(.slide-left) {
  animation: exit-slide-left ease-in 0.25s;
}

::view-transition-new(.enter-slide-right):only-child {
  animation: enter-slide-right ease-in 0.25s forwards;
}
::view-transition-old(.exit-slide-left):only-child {
  animation: exit-slide-left ease-in 0.25s forwards;
}

:root:active-view-transition-type(navigation-back) {
  &::view-transition-new(.slide-on-nav) {
    animation: enter-slide-right ease-in 0.25s;
  }
  &::view-transition-old(.slide-on-nav) {
    animation: exit-slide-right ease-in 0.25s;
  }
}

:root:active-view-transition-type(navigation-forward) {
  &::view-transition-new(.slide-on-nav) {
    animation: enter-slide-left ease-in 0.25s;
  }
  &::view-transition-old(.slide-on-nav) {
    animation: exit-slide-left ease-in 0.25s;
  }
}

Domain

Imported By

Source

Frequently Asked Questions

What does Transitions.module.css do?
Transitions.module.css is a source file in the react codebase, written in css. It belongs to the BabelCompiler domain.
What files import Transitions.module.css?
Transitions.module.css is imported by 1 file(s): Page.js.
Where is Transitions.module.css in the architecture?
Transitions.module.css is located at fixtures/view-transition/src/components/Transitions.module.css (domain: BabelCompiler, directory: fixtures/view-transition/src/components).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free