当前位置:   article > 正文

uniapp使用colorUI_uniapp colorui

uniapp colorui

colorUI

微动画 | ColorUI 使用文档

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

App.vue

  1. </script>
  2. <style>
  3. @import url('colorui/icon.css');
  4. @import url('colorui/main.css');
  5. @import url("colorui/animation.css");
  6. @-webkit-keyframes show {
  7. 0% {
  8. transform: translateY(-50px);
  9. }
  10. 60% {
  11. transform: translateY(40upx);
  12. }
  13. 100% {
  14. transform: translateY(0px);
  15. }
  16. }
  17. </style>

 

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

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

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

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

例如:

  1. //动画
  2. <div v-for="(item,index) in 10" :key="index" class="box" :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]">
  3. </div>
  4. //渐显
  5. <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"
  6. >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是控制点坐标。

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/空白诗007/article/detail/868990
推荐阅读
相关标签
  

闽ICP备14008679号