为什么在UIkit中使用uk-animation-slide-top时没有动画效果？

Good“怡硕提问于 2026-01-30 17:42:34 阅读 76

组件

我按照文档给按钮加了uk-toggle和uk-animation-slide-top，点击时元素虽然显示了但没滑动效果，这是为什么呢？

我这样写的代码：




   这里是滑动显示的内容

已经确认引入了UIkit的CSS和JS文件，也试过把动画类写成uk-animation-slide-top uk-animation-duration-1s，但还是没动画。是不是需要额外初始化什么？或者和hidden属性冲突了？

我来解答赞 24 收藏

反馈

2 条解答

❤梦媛 Lv1

试试这个，UIkit的动画需要配合uk-animation-reverse或者用uk-switcher才能触发滑动效果，单靠uk-animation-slide-top配合uk-toggle是不行的，你得改成：



  显示内容







  这里是滑动显示的内容

2026-02-26 09:15

Mr-文瑞 Lv1

你这个问题挺典型的，确实是用法上有点小问题。UIkit的动画类 uk-animation-slide-top 是需要配合 uk-transition 或者显式的触发方式才能生效的，直接加在元素上是不会自动跑动画的。

标准写法是这样的：

<div uk-toggle="target: #my-id">点击我</div>



<div id="my-id" class="uk-transition-slide-top" style="display: none;">

    这里是滑动显示的内容

</div>

注意几点：
1. 动画类名要改成 uk-transition-slide-top，不是 uk-animation-slide-top
2. 目标元素默认需要用 style="display: none;" 隐藏
3. 确保引入了 UIkit 的所有依赖，包括 uikit.js 和 uikit-icons.js

如果你还是没效果，检查下浏览器控制台有没有报错，或者版本是不是对不上。按这个方法来基本就没问题了。开发就是这样，有时候文档看漏一个细节就容易踩坑，我也是踩过不少才总结出来的😂

2026-01-31 03:03