过渡

在将鼠标悬停在元素上时，在两种状态之间创建平滑过渡。

用法

要切换悬停或聚焦时的过渡，请向父元素添加 .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>

文档

过渡

用法

标题

副标题