圆形动画不显示

Question

我抓到了这段代码，

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/)

圆形动画不显示

Circle animation not displaying

reactjs

pose