语义 UI 淡入淡出 in/out 过渡

Question

语义 UI 的文档确实为 transitions 提供了 link，但缺少 'fade in' 和 'fade out' 效果的条目。它们在未来的版本中吗？

Answer 1

虽然文档中没有明确提及，但 Semantic UI 中的所有动画都可以使用修饰符 in 或 out 来强制动画向内或向外。

// Will fade out the leaf if it's visible, otherwise fades in.
$('.autumn.leaf').transition('fade');

// Will always fade in the leaf. If it's visible, it will first hide it immediately, then fade it in.
$('.autumn.leaf').transition('fade in');

// Will always fade out the leaf. If it's hidden, it will first show it immediately, then fade it out.
$('.autumn.leaf').transition('fade out');

我个人建议您避免使用它们 - 您应该注意元素的当前可见性并只使用正常的 fade 转换：

// Only fade in the leaf if it's hidden, otherwise do nothing.
if ($('.autumn.leaf').hasClass('hidden')) {
    $('.autumn.leaf').transition('fade');
}