轉場效果
當滑鼠懸停在元素上時，在兩種狀態之間建立平滑的轉場效果。
用法
若要在滑鼠懸停或聚焦時切換轉場效果，請將 .uk-transition-toggle 類別新增至父元素。同時新增 tabindex="0"，以允許透過鍵盤導航和觸控裝置聚焦動畫。將其中一個 .uk-transition-* 類別新增至任何子元素，以套用實際效果。
| 類別 | 描述 |
|---|---|
.uk-transition-fade |
讓元素淡入 |
.uk-transition-scale-up.uk-transition-scale-down |
元素會放大或縮小。 |
.uk-transition-slide-top.uk-transition-slide-bottom.uk-transition-slide-left.uk-transition-slide-right |
讓元素從上方滑入 |
.uk-transition-slide-top-small.uk-transition-slide-bottom-small.uk-transition-slide-left-small.uk-transition-slide-right-small |
元素從上方、下方、左側或右側滑入，距離較小。 |
.uk-transition-slide-top-medium.uk-transition-slide-bottom-medium.uk-transition-slide-left-medium.uk-transition-slide-right-medium |
元素從上方、下方、左側或右側滑入，距離中等。 |
此元件主要與覆蓋層元件搭配使用，因為元素會從不可見狀態轉換為可見狀態。若要將覆蓋層放置在另一個元素（例如圖片）的上方，請使用位置元件。
<div class="uk-transition-toggle" tabindex="0">
<div class="uk-transition-fade"></div>
</div>
淡入
底部
圖示
2 張圖片
放大圖片
小型頂部 + 底部
<div class="uk-child-width-1-2 uk-child-width-1-3@s uk-grid-match uk-grid-small" uk-grid>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<img src="images/dark.jpg" width="1800" height="1200" alt="">
<div class="uk-transition-fade uk-position-cover uk-position-small uk-overlay uk-overlay-default uk-flex uk-flex-center uk-flex-middle">
<p class="uk-h4 uk-margin-remove">Fade</p>
</div>
</div>
<p class="uk-margin-small-top">Fade</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<img src="images/dark.jpg" width="1800" height="1200" alt="">
<div class="uk-transition-slide-bottom uk-position-bottom uk-overlay uk-overlay-default">
<p class="uk-h4 uk-margin-remove">Bottom</p>
</div>
</div>
<p class="uk-margin-small-top">Bottom</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
<img src="images/dark.jpg" width="1800" height="1200" alt="">
<div class="uk-position-center">
<span class="uk-transition-fade" uk-icon="icon: plus; ratio: 2"></span>
</div>
</div>
<p class="uk-margin-small-top">Icon</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<img src="images/dark.jpg" width="1800" height="1200" alt="">
<img class="uk-transition-scale-up uk-position-cover" src="images/light.jpg" alt="">
</div>
<p class="uk-margin-small-top">2 Images</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle" tabindex="0">
<img class="uk-transition-scale-up uk-transition-opaque" src="images/dark.jpg" width="1800" height="1200" alt="">
</div>
<p class="uk-margin-small-top">Scale Up Image</p>
</div>
<div class="uk-text-center">
<div class="uk-inline-clip uk-transition-toggle uk-light" tabindex="0">
<img src="images/dark.jpg" width="1800" height="1200" alt="">
<div class="uk-position-center">
<div class="uk-transition-slide-top-small"><h4 class="uk-margin-remove">Headline</h4></div>
<div class="uk-transition-slide-bottom-small"><h4 class="uk-margin-remove">Subheadline</h4></div>
</div>
</div>
<p class="uk-margin-small-top">Small Top + Bottom</p>
</div>
</div>
