mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
36 lines
22 KiB
JavaScript
36 lines
22 KiB
JavaScript
import{_ as d,E as n,c as e,o as h,aR as l,I as i,a as s,w as a}from"./chunks/framework.C7RrxATG.js";const u=JSON.parse('{"title":"Transition 动画","description":"","frontmatter":{},"headers":[],"relativePath":"component/transition.md","filePath":"component/transition.md","lastUpdated":1762249100000}'),k={name:"component/transition.md"},p=l(`<h1 id="transition-动画" tabindex="-1">Transition 动画 <a class="header-anchor" href="#transition-动画" aria-label="Permalink to "Transition 动画""></a></h1><p>用于在元素进入或离开时应用过渡效果。</p><h2 id="基本用法" tabindex="-1">基本用法 <a class="header-anchor" href="#基本用法" aria-label="Permalink to "基本用法""></a></h2><p>将元素包裹在 <code>wd-transition</code> 标签中，并设置 <code>show</code> 来切换显隐，设置 <code>name</code> 选择动画。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-transition</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"show"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"fade"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>内容</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-transition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="动画类型" tabindex="-1">动画类型 <a class="header-anchor" href="#动画类型" aria-label="Permalink to "动画类型""></a></h2><p><code>wd-transition</code> 内置了常用的动画，如 <code>fade</code>、<code>slide</code>、<code>zoom-in</code> 等。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-transition</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"show"</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"slide"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">>内容</</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-transition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="动画时间" tabindex="-1">动画时间 <a class="header-anchor" href="#动画时间" aria-label="Permalink to "动画时间""></a></h2><p>可以通过 <code>duration</code> 设置动画执行时间，动画拆分为 <code>enter</code> 进入动画和 <code>leave</code> 离开动画，<code>duration</code> 可以分别设置进入动画执行时间和离开动画执行时间： <code>{ enter: 300, leave: 500 }</code>。</p><h2 id="自定义动画" tabindex="-1">自定义动画 <a class="header-anchor" href="#自定义动画" aria-label="Permalink to "自定义动画""></a></h2><p>可以通过 <code>enter-class</code>、<code>enter-active-class</code>、<code>enter-to-class</code>、<code>leave-class</code>、<code>leave-active-class</code>、<code>leave-to-class</code> 设置自定义动画的类名。</p><p>在动画进入时，会给标签设置 <code>enter-class</code> 和 <code>enter-active-class</code> 样式，在下一帧切换为 <code>enter-to-class</code> 和 <code>enter-active-class</code> 样式，因此进入动画是从 <code>enter-class</code> 样式切换为 <code>enter-to-class</code> 样式状态，<code>enter-active-class</code> 设置 <code>transition</code> 相关属性。</p><p>在动画离开时，会给标签设置 <code>leave-class</code> 和 <code>leave-active-class</code> 样式，在下一帧切换为 <code>leave-to-class</code> 和 <code>leave-active-class</code> 样式，因此离开动画是从 <code>leave-class</code> 样式切换为 <code>leave-to-class</code> 样式状态，<code>leave-active-class</code> 设置 <code>transition</code> 相关属性。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-transition</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :show</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"customShow"</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :duration</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"{ enter: 700, leave: 1000 }"</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> enter-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"custom-enter"</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> enter-active-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"custom-enter-active"</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> enter-to-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"custom-enter-to"</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> leave-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"custom-leave"</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> leave-active-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"custom-leave-active"</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> leave-to-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"custom-leave-to"</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> custom-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"block"</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">/></span></span></code></pre></div><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:deep(</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 10</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 10</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:deep(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.block</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">fixed</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> margin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -50</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#0083ff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:deep(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.custom-enter-active</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">),</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:deep(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.custom-leave-active</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> transition-property</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">transform</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:deep(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.custom-enter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> transform</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">translate3d</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rotate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-180</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">deg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#ff0000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:deep(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.custom-leave-to</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> transform</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">translate3d</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rotate</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">180</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">deg</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#ff0000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="attributes" tabindex="-1">Attributes <a class="header-anchor" href="#attributes" aria-label="Permalink to "Attributes""></a></h2><table tabindex="0"><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th><th>最低版本</th></tr></thead><tbody><tr><td>show</td><td>是否展示组件</td><td>boolean</td><td>-</td><td>-</td><td>-</td></tr><tr><td>name</td><td>动画类型</td><td>string / array</td><td><code>TransitionName</code></td><td>-</td><td>-</td></tr><tr><td>duration</td><td>动画执行时间</td><td>number / object / boolean</td><td>-</td><td>300(ms)</td><td>-</td></tr><tr><td>custom-style</td><td>自定义样式</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>custom-class</td><td>自定义根节点样式类</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>lazy-render</td><td>弹层内容懒渲染</td><td>boolean</td><td>-</td><td>false</td><td>-</td></tr><tr><td>destroy</td><td>是否在动画结束时销毁子节点</td><td>boolean</td><td>-</td><td>true</td><td>-</td></tr><tr><td>enter-class</td><td>进入过渡的开始状态</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>enter-active-class</td><td>进入过渡的激活状态</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>enter-to-class</td><td>进入过渡的结束状态</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>leave-class</td><td>离开过渡的开始状态</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>leave-active-class</td><td>离开过渡的激活状态</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>leave-to-class</td><td>离开过渡的结束状态</td><td>string</td><td>-</td><td>-</td><td>-</td></tr><tr><td>disable-touch-move</td><td>是否阻止触摸滚动</td><td>boolean</td><td>-</td><td>false</td><td>1.11.0</td></tr></tbody></table><h3 id="transitionname-动画类型" tabindex="-1">TransitionName 动画类型 <a class="header-anchor" href="#transitionname-动画类型" aria-label="Permalink to "TransitionName 动画类型""></a></h3><table tabindex="0"><thead><tr><th>名称</th><th>说明</th><th>最低版本</th></tr></thead><tbody><tr><td>fade</td><td>淡入淡出</td><td>-</td></tr><tr><td>fade-down</td><td>向下淡入淡出</td><td>-</td></tr><tr><td>fade-left</td><td>向左淡入淡出</td><td>-</td></tr><tr><td>fade-right</td><td>向右淡入淡出</td><td>-</td></tr><tr><td>fade-up</td><td>向上淡入淡出</td><td>-</td></tr><tr><td>slide-down</td><td>向下滑动</td><td>-</td></tr><tr><td>slide-left</td><td>向左滑动</td><td>-</td></tr><tr><td>slide-right</td><td>向右滑动</td><td>-</td></tr><tr><td>slide-up</td><td>向上滑动</td><td>-</td></tr><tr><td>zoom-in</td><td>缩放进入</td><td>-</td></tr><tr><td>zoom-out</td><td>缩放离开</td><td>-</td></tr></tbody></table><h2 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to "Events""></a></h2><table tabindex="0"><thead><tr><th>事件名称</th><th>说明</th><th>参数</th><th>最低版本</th></tr></thead><tbody><tr><td>before-enter</td><td>进入前触发</td><td>-</td><td>-</td></tr><tr><td>enter</td><td>进入时触发</td><td>-</td><td>-</td></tr><tr><td>after-enter</td><td>进入后触发</td><td>-</td><td>-</td></tr><tr><td>before-leave</td><td>离开前触发</td><td>-</td><td>-</td></tr><tr><td>leave</td><td>离开时触发</td><td>-</td><td>-</td></tr><tr><td>after-leave</td><td>离开后触发</td><td>-</td><td>-</td></tr><tr><td>click</td><td>点击时触发</td><td>-</td><td>-</td></tr></tbody></table><h2 id="slots" tabindex="-1">Slots <a class="header-anchor" href="#slots" aria-label="Permalink to "Slots""></a></h2><table tabindex="0"><thead><tr><th>插槽名称</th><th>说明</th><th>最低版本</th></tr></thead><tbody><tr><td>default</td><td>需要应用动画效果的内容</td><td>-</td></tr></tbody></table><h2 id="外部样式类" tabindex="-1">外部样式类 <a class="header-anchor" href="#外部样式类" aria-label="Permalink to "外部样式类""></a></h2><table tabindex="0"><thead><tr><th>类名</th><th>说明</th><th>最低版本</th></tr></thead><tbody><tr><td>custom-class</td><td>根节点样式</td><td>-</td></tr><tr><td>enter-class</td><td>定义进入过渡的开始状态，在元素被插入前生效，在插入的下一帧移除</td><td>-</td></tr><tr><td>enter-active-class</td><td>定义动画执行期间的状态，在整个进入动画中应用；在元素被插入前生效，在动画结束后移除；可以定义 transition 相关属性</td><td>-</td></tr><tr><td>enter-to-class</td><td>定义进入过渡的结束状态，在元素被插入的下一帧生效，在动画结束后移除</td><td>-</td></tr><tr><td>leave-class</td><td>定义离开过渡的开始状态，在离开动画触发时立即生效，在下一帧移除</td><td>-</td></tr><tr><td>leave-active-class</td><td>定义动画执行期间的状态，在整个离开动画中应用；在离开动画触发时立即生效，在动画结束后移除；可以定义 transition 相关属性</td><td>-</td></tr><tr><td>leave-to-class</td><td>定义离开过渡的结束状态，在离开动画触发时的下一帧生效，在动画结束后移除</td><td>-</td></tr></tbody></table><h2 id="源代码" tabindex="-1">源代码 <a class="header-anchor" href="#源代码" aria-label="Permalink to "源代码""></a></h2>`,27);function r(o,E,c,g,y,F){const t=n("ExternalLink");return h(),e("div",null,[p,i(t,{href:"https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/subPages/transition"},{default:a(()=>[s("文档")]),_:1}),s(" • "),i(t,{href:"https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/uni_modules/wot-design-uni/components/wd-transition"},{default:a(()=>[s("组件")]),_:1})])}const b=d(k,[["render",r]]);export{u as __pageData,b as default};
|