Tui Plus Vapor

Appearance

VaporCSS animation样式写法参考 ​

过渡属性 ​

控制哪些 CSS 属性应该参与过渡效果：

类名说明生成的 CSS备注
atp-a全部属性过渡transition-property: all;
atp-n无属性过渡transition-property: none;
atp-w宽度过渡transition-property: width;
atp-h高度过渡transition-property: height;
atp-m外边距过渡transition-property: margin;
atp-mt上外边距过渡transition-property: margin-top;
atp-mb下外边距过渡transition-property: margin-bottom;
atp-ml左外边距过渡transition-property: margin-left;
atp-mr右外边距过渡transition-property: margin-right;
atp-l左位置过渡transition-property: left;
atp-r右位置过渡transition-property: right;
atp-t上位置过渡transition-property: top;
atp-b下位置过渡transition-property: bottom;
atp-p内边距过渡transition-property: padding;
atp-pl左内边距过渡transition-property: padding-left;
atp-pr右内边距过渡transition-property: padding-right;
atp-pt上内边距过渡transition-property: padding-top;
atp-pb下内边距过渡transition-property: padding-bottom;
atp-o透明度过渡transition-property: opacity;
atp-bc背景颜色过渡transition-property: background-color;
atp-boc边框颜色过渡transition-property: border-color;
atp-btc上边框颜色过渡transition-property: border-top-color;
atp-bbc下边框颜色过渡transition-property: border-bottom-color;
atp-blc左边框颜色过渡transition-property: border-left-color;
atp-brc右边框颜色过渡transition-property: border-right-color;
atp-tr变换过渡transition-property: transform;

过渡 timing 函数 ​

控制过渡效果的速度变化曲线：

类名说明生成的 CSS备注
attf-eease 过渡效果transition-timing-function: ease;默认值，缓入缓出
attf-eiease-in 过渡效果transition-timing-function: ease-in;缓入
attf-eoease-out 过渡效果transition-timing-function: ease-out;缓出
attf-eioease-in-out 过渡效果transition-timing-function: ease-in-out;缓入缓出
attf-l线性过渡效果transition-timing-function: linear;匀速
attf-cb自定义三次贝塞尔曲线过渡效果transition-timing-function: cubic-bezier();需要指定具体的贝塞尔曲线参数

过渡持续时间 ​

控制过渡效果的持续时间：

类名说明生成的 CSS备注
atd-500动画时间transition-duration: 500ms;支持不同时间值

变换系统 ​

旋转 ​

类名说明生成的 CSS备注
atr-90顺时针旋转 90 度transform: rotate(90deg);支持不同角度值
atr-n90逆时针旋转 90 度transform: rotate(-90deg);支持不同角度值
atrx-90X 轴旋转 90 度transform: rotateX(90deg);支持不同角度值
atrx-n90X 轴逆时针旋转 90 度transform: rotateX(-90deg);支持不同角度值
atry-90Y 轴旋转 90 度transform: rotateY(90deg);支持不同角度值
atry-n90Y 轴逆时针旋转 90 度transform: rotateY(-90deg);支持不同角度值
atrz-90Z 轴旋转 90 度transform: rotateZ(90deg);支持不同角度值
atrz-n90Z 轴逆时针旋转 90 度transform: rotateZ(-90deg);支持不同角度值

缩放 ​

类名说明生成的 CSS备注
ats-0.5缩放 0.5 倍transform: scale(0.5);支持不同缩放值
atsx-0.5X 轴缩放 0.5 倍transform: scaleX(0.5);支持不同缩放值
atsy-0.5Y 轴缩放 0.5 倍transform: scaleY(0.5);支持不同缩放值

平移 ​

类名说明生成的 CSS备注
att-50平移 50rpxtransform: translate(50rpx);支持不同距离值
att-n50反向平移 50rpxtransform: translate(-50rpx);支持不同距离值
attx-50X 轴平移 50rpxtransform: translateX(50rpx);支持不同距离值
attx-n50X 轴反向平移 50rpxtransform: translateX(-50rpx);支持不同距离值
atty-50Y 轴平移 50rpxtransform: translateY(50rpx);支持不同距离值
atty-n50Y 轴反向平移 50rpxtransform: translateY(-50rpx);支持不同距离值

变换原点 ​

类名说明生成的 CSS备注
ato-top,left变换原点在左上角transform-origin: top left;支持不同位置值
ato-100%,50%变换原点在水平居中偏右transform-origin: 100% 50%;支持不同位置值

使用示例 ​

基本过渡效果 ​

vue
<template>
  <view class="atp-bc attf-e atd-500 bg-red-500 hover:bg-blue-500 w-40 h-40 rounded-lg flex items-center justify-center text-white">
    悬停变色
  </view>
</template>

变换效果 ​

vue
<template>
  <view class="w-40 h-40 bg-green-500 rounded-lg flex items-center justify-center text-white atp-tr attf-e atd-500 hover:atr-180">
    悬停旋转
  </view>
</template>

复杂动画组合 ​

vue
<template>
  <view class="w-40 h-40 bg-purple-500 rounded-lg flex items-center justify-center text-white atp-tr attf-e atd-500 hover:atr-360 hover:ats-1.2">
    悬停旋转缩放
  </view>
</template>

最佳实践 ​

  1. 组合使用：将过渡属性、timing 函数和持续时间类组合使用，创建流畅的动画效果
  2. 性能优化：优先使用 transform 和 opacity 属性进行动画，它们的性能更好
  3. 适度使用：过度的动画可能会影响用户体验，使用时要适度
  4. 响应式设计：在不同屏幕尺寸上测试动画效果，确保在所有设备上都能正常工作
  5. 可访问性：考虑添加减少动画的选项，以满足不同用户的需求

自定义动画 ​

除了内置的过渡和变换效果，你还可以通过 theme.json 配置文件添加自定义动画：

json
{
  "animations": {
    "bounce": "animation: bounce 1s infinite",
    "pulse": "animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
  }
}

然后在你的组件中使用这些自定义动画类：

vue
<template>
  <view class="w-40 h-40 bg-yellow-500 rounded-lg flex items-center justify-center text-white animation-bounce">
    弹跳动画
  </view>
</template>