使用 react-inline-transition-group 在 SVG 而不是 DIV 上进行自定义转换

编程问答 2022-05-16

问题描述

我正在生成一个带有独特卡片的应用程序，这些卡片显示油漆飞溅图形。每张卡片都有大约 9 个油漆飞溅，每一个都是随机选择并转换成组合图形的。抛开所有的谦虚，看起来很笨拙。 12 种油漆飞溅选择是 SVG，随变换随机选择，并作为道具传递给 RenderSplatters 函数。

我想为每个图形中的飞溅设置动画，所以看起来九个不同的飞溅移动来制作卡片。

由于变换和油漆飞溅是随机变换的，我使用内联样式，因为我无法在样式表中按需生成随机 CSS 样式。

我找到了可以帮助 react-inline-transition-group 的完美组件，但我无法将其应用于 SVG 而不是 DIV 组件。

文档说要将 React 组件接收到的属性样式传递给将获得这些样式的 HTML 元素。

我可以向下传递样式对象，但需要选择特定属性，例如基础、出现等，并且当我不应用其他样式来创建过渡时。我坚持使用一种内联样式，而不是利用 <Transition> 的功能。

我应该如何正确传递属性样式？谢谢！

这是编辑后的代码：

//this is called nine different times for each card,and nine different splatters are rendered. I only have SplatterOne in my example for simplification
function RenderSplatters(props) {
    let {splatterNum,skewX,skewY,scale,rotation,xTrans,yTrans} = props.splatter; //randomly generated transform props

    const splatStyles ={
        base: {
            transform: 'translateX(0px) translateY(0px) skew(0)',fill: '#BF1120',},appear: {
            transform: 'string based on above transform props',leave: {}
        };

function Splatter () {
    return (<Transition
            childrenStyles={{
                base: splatStyles.base,appear: splatStyles.appear,enter: splatStyles.appear,leave: splatStyles.leave,}}>
                <SplatterOne style={ /* what goes here? */}/>
            </Transition>)


function SplatterOne(props) {
    return(
        <svg style={props.style} /*other attributes redacted */>
        /*redacted SVG paths */
)}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmlinline-stylesjavascriptreactjsreactjsreactjsreactjs