是否可以使用 React Spring 为删除线设置动画？

Question

我是 React 的新手 Spring 我最初尝试过这个

const strikeProps = useSpring({
    textDecoration: "line-through",
    from: { textDecoration: "none" },
});

但它不起作用。我认为应该有一种方法可以为此模拟 CSS 解决方案。

Answer 1

这里的问题是，原来的CSS解决方案是使用伪元素来模拟strike trough。我们只能为普通 html 元素添加 react-spring 属性。所以最紧凑的方法是为这个问题创建一个单独的删除线组件。例如：

const StrikeTroughtText = ({ children, weight = 1 }) => {
  const props = useSpring({
    from: { width: "0%" },
    to: { width: "100%" }
  });

  return (
    <div style={{ position: "relative", display: "inline-block" }}>
      {children}
      <animated.div
        style={{
          position: "absolute",
          top: "50%",
          left: 0,
          width: props.width,
          height: `${weight}px`,
          background: "black"
        }}
      />
    </div>
  );
};

我们基本上为绝对定位 div 的宽度设置动画，在文本上包含一条黑线。

您可以像 div 组件一样使用它：

<StrikeTroughtText>text</StrikeTroughtText>

对于更大的字体大小，默认的 1 px 线宽不够，所以我也添加了线宽属性。

这是我的例子：https://codesandbox.io/s/react-strike-trought-text-component-with-react-spring-animation-86cfd?file=/src/App.js

是否可以使用 React Spring 为删除线设置动画？

is it possible to animate a strikethrough with React Spring?

reactjs

react-spring