过渡
在悬停元素时，在两个状态之间创建平滑过渡。
用法
要切换悬停或焦点时的过渡效果，请将 .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>
