是否可以使用 React Spring 为删除线制作动画？答案

【问题标题】：is it possible to animate a strikethrough with React Spring?是否可以使用 React Spring 为删除线制作动画？
【发布时间】：2020-07-23 16:42:26
【问题描述】：

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

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

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

【问题讨论】：

不是特定于 react-spring，而是 here is a post that shows how to accomplish this with CSS.
是的。在发布我的问题之前，我已经看到了该答案。想知道是否可以使用 react-spring 重新创建。

标签： reactjs react-spring

【解决方案1】：

这里的问题是，原来的 CSS 解决方案是使用伪元素来模拟罢工槽。我们只能为普通的 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 线宽是不够的，所以我也添加了一个 weight 属性。

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

【讨论】：