メインコンテンツへスキップ

ドキュメント

トランジション

要素にホバーしたときに、2つの状態間をスムーズにトランジションさせます。

使い方

ホバーまたはフォーカス時にトランジションを切り替えるには、親要素に.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>