reactjs - 圆圈动画不显示

Question

来自： https ://popmotion.io/pose/

我抓住了这个代码，

const Circle = posed.div({
  attention: {
    scale: 1.3,
    transition: {
      type: 'spring',
      stiffness: 200,
      damping: 0
    }
  }
})

我正在做：

<Circle />

但是，什么也没有发生。我错过了什么吗？

Answer 1

您需要为以下创建两个状态posed.div：

const Circle = posed.div({
  attention: {
    scale: 1.3,
    transition: {
      type: "spring",
      stiffness: 200,
      damping: 0
    }
  },
  rest: {
    scale: 1
  }
});

那么你需要将状态传递给你的 Circle 和一些样式来使这个组件变成红色和圆形（popmotion.io 不会为你做）

<Circle
  className="circle"
  pose={isLoading ? "attention" : "rest"}
/>

这是工作解决方案https://codesandbox.io/s/pose-get-started-zv637?file=/src/index.js

但我不确定这是否是制作加载器的最佳方式，因为 popmotion.io 是一个动画状态转换的工具。我可以建议你使用纯 css 加载器（https://loading.io/css/）