1. Vue3 Transition 渐变

1.1 引入样式

<<<<<<< HEAD
import 'litos-ui-vue/style/util/transition.css';
=======
import '@asteres/litos-ui-vue/style/util/transition.css';
>>>>>>> 0c57b7ee (rename: litos-ui-vue)

1.2 使用

所有的渐变都支持传递 --nt-transition-times 控制时长, 默认为 0.3s；只需要简单的添加相应的 Transition-name 属性即可。

1.2.1 nt-opacity

普通渐变进入/退出

1.2.2 nt-fadein

从顶部往下移动渐变的进入/退出; 支持通过 --nt-fadein-offset 控制距离, 默认为 -20px

1.2.3 nt-scale

缩放进入/退出

样式变量

组件提供了下列 CSS 变量，可用于自定义样式

名称	描述	默认值
--nt-transition-times	渐变时长, 所有渐变都支持	0.3s
--nt-fadein-offset	渐变距离, 支持的渐变有: nt-fadein	-20px

2. CSS Animation 动画

引入样式

<<<<<<< HEAD
import 'litos-ui-vue/style/util/animation.css';
=======
import '@asteres/litos-ui-vue/style/util/animation.css';
>>>>>>> 0c57b7ee (rename: litos-ui-vue)

使用

可以直接通过动画名称，添加 css class、也可以通过 css animation 使用动画名称；例如：

添加 css class

所有的动画的 class 规则为: nt- + 动画名称 + -anim；例如旋转动画为: nt-rotate-anim

<lt-loading-icon class="nt-rotate-anim" />

通过 css animation 使用动画名称

所有的动画的 animation 名称规则为：nt- + 动画名称 + -frame；例如旋转动画为: nt-rotate-frame

<template>
  <lt-loading-icon class="custome-rotate" />
</template>

<style>
.custome-rotate {
  animation: nt-rotate-frame 1.5s infinite linear;
}
</style>

内置动画

rotate

3. 滚动条样式

如果觉得默认滚动条不好看，想修改滚动条样式

引入滚动条样式表

import 'litos-ui-vue/style/util/scrollbar.css';

使用

只需要在滚动容器添加 nt-scrollbar 类即可

更改滚动条颜色以及大小

通过使用下面表格中的 CSS 变量，可以更改滚动条的颜色以及大小

主题定制 - 样式变量

名称	描述	默认值
--nt-scrollbar-bg	滑块背景色	#d9d9d9
--nt-scrollbar-hover	鼠标悬浮时滑块颜色	#bfbfbf
--nt-scrollbar-size	滑块尺寸, 水平滚动条时为高度，垂直时为宽度	10px