过渡效果／Transition

# 过渡效果／Transition

<p class="uk-text-lead">鼠标悬停元素时在两种状态之间创建平滑的过渡效果。</p>

## Usage-用法

若要在悬停或获得焦点时切换，请将 `.uk-transition-toggle` class添加到父元素。还可以添加 `tabindex="0"` ，使过渡动画可以通过键盘导航和触摸设备获得焦点。将 `.uk-transition-*` class之一添加到任何子元素以应用实际效果。

| Class                 | 描述              |
|:----------------------|:-------------------------|
| `.uk-transition-fade` | 元素淡入效果 |
| `.uk-transition-scale-up`<br> `.uk-transition-scale-down` | 元素按比例放大或缩小。 |
| `.uk-transition-slide-top`<br> `.uk-transition-slide-bottom`<br> `.uk-transition-slide-left`<br> `.uk-transition-slide-right` | 让元素从顶部滑入 |
| `.uk-transition-slide-top-small`<br> `.uk-transition-slide-bottom-small`<br>  `.uk-transition-slide-left-small`<br> `.uk-transition-slide-right-small` | 元素从顶部，底部，左侧或右侧以较小的距离滑入。 |
| `.uk-transition-slide-top-medium`<br> `.uk-transition-slide-bottom-medium`<br>  `.uk-transition-slide-left-medium`<br> `.uk-transition-slide-right-medium`   | 元素从顶部，底部，左侧或右侧以中等距离滑动。 |

当元素需要从不可见状态变为可见状态时，此组件通常与 [Overlay 组件](overlay.md) 结合使用。要将遮罩层放置在另一个元素（例如图像）的顶部，请使用 [Position 组件](position.md)。

```html
<div class="uk-transition-toggle" tabindex="0">
    <div class="uk-transition-fade"></div>
</div>
```

```example
<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" 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" 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" 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" 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" 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" 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>
```