Rax 中怎么让 CSS 动画在小程序端正常跑起来？

シ昕彤提问于 2026-03-13 17:34:24 阅读 4

框架

我用 Rax 写了个简单的加载动画，在 Web 端跑得好好的，但一到微信小程序就完全不动了，连 transition 都没反应。是不是小程序不支持某些 CSS 属性啊？

我试过把 animation 换成 transition，也加了 -webkit- 前缀，还是不行。控制台也没报错，就是静止不动……

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

这段代码在浏览器里转得挺欢，小程序真机预览就是个圆圈，纹丝不动。有人遇到过类似问题吗？是不是得用 rax-animated 这种组件才行？

我来解答赞 0 收藏

反馈

1 条解答

思晨酱~ Lv1

小程序的 CSS 支持确实很坑，transform、animation 这类属性限制很多，不是所有 web 上的写法都能直接搬过去。

你提到的 rax-animated 确实是解决方案之一。Rax 官方封装了这个组件来兼容小程序端的动画需求。

用 rax-animated 改一下大概是这样：

import { createElement } from 'rax';

import Animated from 'rax-animated';



const Spinner = () => {

  const spinValue = new Animated.Value(0);

  

  Animated.loop(

    Animated.timing(spinValue, {

      toValue: 360,

      duration: 1000,

      easing: Animated.Easing.linear,

    })

  ).start();



  return (

    <Animated.View

      style={{

        width: 20,

        height: 20,

        borderWidth: 2,

        borderColor: '#f3f3f3',

        borderTopColor: '#3498db',

        borderRadius: 10,

        transform: [

          { rotate: spinValue.interpolate({

            inputRange: [0, 360],

            outputRange: ['0deg', '360deg']

          })}

        ],

      }}

    />

  );

};



export default Spinner;

rax-animated 用的是数值动画 API，在小程序端会转换成小程序原生的动画能力，比纯 CSS 靠谱多了。

另外要注意，rax-animated 需要单独安装：

npm install rax-animated --save

如果你不想用 rax-animated，另一个思路是用微信小程序的 animation API 自己写动画逻辑，通过 setData 去更新 transform，但那样代码会繁琐很多，还是用 rax-animated 省事。

2026-03-13 18:03