uniapp使用colorUI

colorUI

微动画 | ColorUI 使用文档

1：把colorui里三个文件复制到自己项目中去

App.vue

</script>
<style>
@import url('colorui/icon.css');
@import url('colorui/main.css');
@import url("colorui/animation.css");
	@-webkit-keyframes show {
		0% {
			transform: translateY(-50px);
		}

		60% {
			transform: translateY(40upx);
		}

		100% {
			transform: translateY(0px);
		}
	}
</style>

具体来说，这个动画包含以下关键帧：

0%：动画开始时，元素的位置会沿着Y轴向上移动50像素。这是通过transform: translateY(-50px);实现的。
60%：动画进行到60%时，元素的位置会沿着Y轴向上移动40像素。这是通过transform: translateY(40upx);实现的。这里的upx表示单位为像素，所以实际移动的距离是40像素。
100%：动画结束时，元素的位置会回到原始位置，即Y轴上不移动。这是通过transform: translateY(0px);实现的。

通过使用这个动画，你可以控制元素的显示效果，例如使其逐渐出现或向下移动。

2：想要的c复制到自己的项目中

例如：

//动画
 
<div v-for="(item,index) in 10" :key="index" class="box" :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]">
    </div>

//渐显

    <button class="cu-btn margin-sm basis-sm shadow animation-scale-up" style="animation-delay: 0.2s;animation-duration: 1.2s;animation-timing-function:ease"
>111</button>

以下是一些常用的动画CSS属性：

animation-name: 指定要应用的动画名称。
animation-duration: 设置动画的持续时间，以秒（s）或毫秒（ms）为单位。
animation-timing-function: 定义动画的速度曲线，如线性、缓动、加速等。
animation-delay: 设置动画开始前的延迟时间，以秒（s）或毫秒（ms）为单位。
animation-iteration-count: 定义动画的迭代次数，可以是固定次数（如1、2、3...），也可以是无限循环（如infinite）。
animation-direction: 控制动画的方向，可以是正向播放（normal）、反向播放（reverse）或来回播放（alternate）。
animation-fill-mode: 定义动画在结束后的状态，可以是保持最后帧（forwards）、回到初始状态（backwards）或两者兼有（both）。
animation-play-state: 控制动画是否正在运行或暂停。
animation: 是一个简写属性，用于一次性设置以上所有动画属性。