跳至主要内容

文档

动画

一组可在页面中使用的流畅动画。

用法

在任何元素上添加一个 .uk-animation-* 类。动画将在添加该类时显示，因此通常会在页面加载时立即显示。要将动画显示在其他时间点，例如元素进入视窗时，可以使用 JavaScript 添加该类，例如使用 Scrollspy 组件。这是 UIkit 中许多使用动画的组件的工作原理。所有动画本身都是使用 CSS 实现的，因此它们不需要 JavaScript 来播放。

类 描述
.uk-animation-fade 元素淡入。
.uk-animation-scale-up
.uk-animation-scale-down		 元素淡入并放大或缩小。
.uk-animation-slide-top
.uk-animation-slide-bottom .uk-animation-slide-left
.uk-animation-slide-right		 元素淡入并从顶部、底部、左侧或右侧以其自身高度或宽度滑动。
.uk-animation-slide-top-small
.uk-animation-slide-bottom-small .uk-animation-slide-left-small
.uk-animation-slide-right-small		 元素淡入并从顶部、底部、左侧或右侧以更短的距离滑动，该距离由固定像素值指定。
.uk-animation-slide-top-medium
.uk-animation-slide-bottom-medium .uk-animation-slide-left-medium
.uk-animation-slide-right-medium		 元素淡入并从顶部、底部、左侧或右侧以中等距离滑动，该距离由固定像素值指定。
.uk-animation-kenburns 元素非常缓慢地放大，没有淡入。
.uk-animation-shake 元素晃动。
.uk-animation-stroke SVG 元素的描边被绘制出来。

要将动画切换为悬停或焦点，请将 .uk-animation-toggle 类添加到父元素中。还需添加 tabindex="0"，以便通过键盘导航和触摸设备使动画可聚焦。

<div class="uk-animation-toggle" tabindex="0">
    <div class="uk-animation-fade"></div>
</div>

  • 淡入

    放大

    缩小

    晃动

    左侧

    顶部

    底部

    右侧

    左侧小

    顶部小

    底部小

    右侧小

    左侧中

    顶部中

    底部中

    右侧中

  • <div class="uk-child-width-1-2 uk-child-width-1-4@s uk-grid-match" uk-grid>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-fade">
            <p class="uk-text-center">Fade</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-scale-up">
            <p class="uk-text-center">Scale Up</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-scale-down">
            <p class="uk-text-center">Scale Down</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-shake">
            <p class="uk-text-center">Shake</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left">
            <p class="uk-text-center">Left</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top">
            <p class="uk-text-center">Top</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom">
            <p class="uk-text-center">Bottom</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right">
            <p class="uk-text-center">Right</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-small">
            <p class="uk-text-center">Left Small</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-small">
            <p class="uk-text-center">Top Small</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-small">
            <p class="uk-text-center">Bottom Small</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-small">
            <p class="uk-text-center">Right Small</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-medium">
            <p class="uk-text-center">Left Medium</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-medium">
            <p class="uk-text-center">Top Medium</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-medium">
            <p class="uk-text-center">Bottom Medium</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-medium">
            <p class="uk-text-center">Right Medium</p>
        </div>
    </div>
</div>

反转修饰符

默认情况下，所有动画都是传入的。要反转任何动画，请添加 .uk-animation-reverse 类。

<div class="uk-animation-fade uk-animation-reverse"></div>

  • 淡入

    放大

    缩小

    晃动

    左侧

    顶部

    底部

    右侧

    左侧小

    顶部小

    底部小

    右侧小

    左侧中

    顶部中

    底部中

    右侧中

  • <div class="uk-child-width-1-2 uk-child-width-1-4@s uk-grid-match" uk-grid>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-fade uk-animation-reverse">
            <p class="uk-text-center">Fade</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-scale-up uk-animation-reverse">
            <p class="uk-text-center">Scale Up</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-scale-down uk-animation-reverse">
            <p class="uk-text-center">Scale Down</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-shake uk-animation-reverse">
            <p class="uk-text-center">Shake</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left uk-animation-reverse">
            <p class="uk-text-center">Left</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top uk-animation-reverse">
            <p class="uk-text-center">Top</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom uk-animation-reverse">
            <p class="uk-text-center">Bottom</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right uk-animation-reverse">
            <p class="uk-text-center">Right</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-small uk-animation-reverse">
            <p class="uk-text-center">Left Small</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-small uk-animation-reverse">
            <p class="uk-text-center">Top Small</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-small uk-animation-reverse">
            <p class="uk-text-center">Bottom Small</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-small uk-animation-reverse">
            <p class="uk-text-center">Right Small</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-left-medium uk-animation-reverse">
            <p class="uk-text-center">Left Medium</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-top-medium uk-animation-reverse">
            <p class="uk-text-center">Top Medium</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-bottom-medium uk-animation-reverse">
            <p class="uk-text-center">Bottom Medium</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-slide-right-medium uk-animation-reverse">
            <p class="uk-text-center">Right Medium</p>
        </div>
    </div>
</div>

快速修饰符

要以更快的速度播放动画，请将 .uk-animation-fast 类添加到元素中。

<div class="uk-animation-fade uk-animation-fast"></div>

  • 淡入

  • <div class="uk-width-1-3@s">
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-fast uk-animation-fade">
            <p class="uk-text-center">Fade</p>
        </div>
    </div>
</div>

原点修饰符

默认情况下，缩放动画从中心开始。要修改此行为，请从 实用工具组件 中添加一个 .uk-transform-origin-* 类。

<div class="uk-animation-scale-up uk-transform-origin-bottom-right"></div>

  • 右下角

    顶部居中

    底部居中

  • <div class="uk-child-width-1-3@s" uk-grid>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-scale-up uk-transform-origin-bottom-right">
            <p class="uk-text-center">Bottom Right</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-scale-up uk-transform-origin-top-center">
            <p class="uk-text-center">Top Center</p>
        </div>
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <div class="uk-card uk-card-default uk-card-body uk-animation-scale-up uk-transform-origin-bottom-center">
            <p class="uk-text-center">Bottom Center</p>
        </div>
    </div>
</div>

肯·伯恩斯

要添加一个简单的肯·伯恩斯效果，请将 .uk-animation-kenburns 类添加到任何图片中。您还可以应用 .uk-animation-reverse 或 实用工具组件 中的一个 .uk-transform-origin-* 类来修改效果。

<img class="uk-animation-kenburns" src="" width="" height="" alt="">

默认情况下，动画在页面加载时开始。在本例中，我们使用了 Scrollspy 组件，在图片进入视窗时切换效果。

  • Example image
    Example image 
  • <div class="uk-child-width-1-2@s uk-grid-small" uk-grid>
    <div>
        <div class="uk-overflow-hidden">
            <img src="images/dark.jpg" width="1800" height="1200" alt="Example image" uk-scrollspy="cls: uk-animation-kenburns; repeat: true">
        </div>
    </div>
    <div>
        <div class="uk-overflow-hidden">
            <img src="images/dark.jpg" width="1800" height="1200" alt="Example image" class="uk-animation-reverse uk-transform-origin-top-right" uk-scrollspy="cls: uk-animation-kenburns; repeat: true">
        </div>
    </div>
</div>

SVG 描边

动画组件可用于动画化 SVG 描边。效果看起来像是 SVG 描边在你眼前被绘制出来。SVG 图片必须作为内联 SVG 注入标记中。这可以通过手动操作或使用 SVG 组件 完成。

以下示例演示了如何手动添加内联 SVG。由于您必须知道描边的确切长度，因此 UIkit 要求您在自定义属性 --uk-animation-stroke 中设置长度。在本例中，描边长度为 46。

<svg class="uk-animation-stroke" style="--uk-animation-stroke: 46;" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
    <path fill="none" stroke="#000" stroke-width="1" d=""/>
</svg>

一个更简单的方法是使用 SVG 组件，通过将 uk-svg="stroke-animation: true" 添加到图片元素中。它将自动计算描边长度并添加 --uk-animation-stroke 自定义属性。

<img src="" width="" height="" alt="" uk-svg="stroke-animation: true">
  • <div class="uk-child-width-1-2@m uk-text-center" uk-grid>
    <div class="uk-animation-toggle" tabindex="0">
        <img class="uk-animation-stroke" src="images/strokes.svg" width="400" height="400" alt="" uk-svg="stroke-animation: true">
    </div>
    <div class="uk-animation-toggle" tabindex="0">
        <img class="uk-animation-stroke uk-animation-reverse" src="images/strokes.svg" width="400" height="400" alt="" uk-svg="stroke-animation: true">
    </div>
</div>