Transition

Used to apply transition effects when elements enter or leave.

Basic Usage

Wrap elements in the wd-transition tag, set show to toggle visibility, and set name to choose the animation.

<wd-transition :show="show" name="fade">Content</wd-transition>

Animation Types

wd-transition has built-in common animations such as fade, slide, zoom-in, etc.

<wd-transition :show="show" name="slide">Content</wd-transition>

Animation Duration

You can set the animation execution time through duration. The animation is split into enter animation and leave animation. duration can set the execution time for both enter and leave animations separately: { enter: 300, leave: 500 }.

Custom Animation

You can set custom animation class names through enter-class, enter-active-class, enter-to-class, leave-class, leave-active-class, leave-to-class.

When the animation enters, the tag will be set with enter-class and enter-active-class styles, and in the next frame, it will switch to enter-to-class and enter-active-class styles. Therefore, the enter animation transitions from the enter-class style to the enter-to-class style state, with enter-active-class setting the transition related properties.

When the animation leaves, the tag will be set with leave-class and leave-active-class styles, and in the next frame, it will switch to leave-to-class and leave-active-class styles. Therefore, the leave animation transitions from the leave-class style to the leave-to-class style state, with leave-active-class setting the transition related properties.

<wd-transition
  :show="customShow"
  :duration="{ enter: 700, leave: 1000 }"
  enter-class="custom-enter"
  enter-active-class="custom-enter-active"
  enter-to-class="custom-enter-to"
  leave-class="custom-leave"
  leave-active-class="custom-leave-active"
  leave-to-class="custom-leave-to"
  custom-class="block"
/>

:deep(button) {
  margin: 0 10px 10px 0;
}
:deep(.block) {
  position: fixed;
  left: 50%;
  top: 50%;
  margin: -50px 0 0 -50px;
  width: 100px;
  height: 100px;
  background: #0083ff;
}

:deep(.custom-enter-active),
:deep(.custom-leave-active) {
  transition-property: background, transform;
}
:deep(.custom-enter) {
  transform: translate3d(-100px, -100px, 0) rotate(-180deg);
  background: #ff0000;
}
:deep(.custom-leave-to) {
  transform: translate3d(100px, 100px, 0) rotate(180deg);
  background: #ff0000;
}

Attributes

Parameter	Description	Type	Options	Default	Version
show	Whether to display component	boolean	-	-	-
name	Animation type	string	fade / fade-up / fade-down / fade-left / fade-right / slide-up / slide-down / slide-left / slide-right / zoom-in	-	-
duration	Animation execution time	number / boolean	-	300(ms)	-
custom-style	Custom style	string	-	-	-

Events

Event Name	Description	Parameters	Version
beforeenter	Triggered before enter	-	-
enter	Triggered during enter	-	-
afterenter	Triggered after enter	-	-
beforeleave	Triggered before leave	-	-
leave	Triggered during leave	-	-
afterleave	Triggered after leave	-	-

External Style Classes

Class Name	Description	Version
custom-class	Root node style	-
enter-class	Defines the starting state of the enter transition, takes effect before the element is inserted, removed in the next frame	-
enter-active-class	Defines the state during animation execution, applied throughout the enter animation; takes effect before the element is inserted, removed after the animation ends; can define transition-related properties	-
enter-to-class	Defines the ending state of the enter transition, takes effect in the next frame after the element is inserted, removed after the animation ends	-
leave-class	Defines the starting state of the leave transition, takes effect immediately when the leave animation is triggered, removed in the next frame	-
leave-active-class	Defines the state during animation execution, applied throughout the leave animation; takes effect immediately when the leave animation is triggered, removed after the animation ends; can define transition-related properties	-
leave-to-class	Defines the ending state of the leave transition, takes effect in the next frame when the leave animation is triggered, removed after the animation ends	-

Source Code

Documentation

• Component