uniapp使用colorUI

2023-12-23 06:19:57

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属性:

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

这些属性可以组合使用,以创建各种复杂的动画效果。通过调整这些属性的值和取值范围,可以实现不同的动画效果和行为。

animation-timing-function属性用于定义动画的速度曲线,即动画的缓动效果。它接受一个或多个值来描述动画的速度变化过程。

常用的缓动函数有以下几个:

  1. linear: 表示动画以恒定速度进行,没有加速和减速的过程。
  2. ease: 表示动画以慢速开始,然后逐渐加速,最后以慢速结束。
  3. ease-in: 表示动画以慢速开始,然后逐渐加速。
  4. ease-out: 表示动画以慢速结束,然后逐渐减速。
  5. ease-in-out: 表示动画以慢速开始和结束,然后逐渐加速和减速。
  6. cubic-bezier(x1, y1, x2, y2): 使用贝塞尔曲线定义自定义的缓动函数,其中x1、y1、x2、y2是控制点坐标。

通过调整这些缓动函数的值,可以创建不同的动画效果,如平滑过渡、跳跃式变化等。

文章来源:https://blog.csdn.net/weixin_47175934/article/details/135151076
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。