未应用元素上的动画

Question

我有一个反应组件，我在其中动态附加一些元素：

addElement( reactComponent, imgurl, e, layer ) {
    const elementWrapper = document.createElement( 'span' );
    const { dispatch } = this.props;
    const element = document.createElement( 'img' );
    const [ x, y ] = this.getMousePositionInsideTheElement( banner, e );

    elementWrapper.style.position = 'absolute';
    elementWrapper.id = layer.name;

    element.src = imgurl;
    element.onload = function () {

        element.classList.add( layer.name.split('.')[0] );
        element.style.height = '50px';
        element.style.width = '50px';
        elementWrapper.style.top = `${y - 50 / 2 }px`;
        elementWrapper.style.left = `${x - 50 / 2}px`;

        element.onclick = () => dispatch( setSelectedLayer( layer ) );

        elementWrapper.appendChild( element );
        reactComponent.appendChild( elementWrapper )
    }
}

根据用户输入，我动态创建一个style 元素并将其附加到head

updateScene( stylesheet ) { let style = document.createElement( 'style' ); style.type = 'text/css'; style.innerHTML = getCSS( stylesheet ); document.getElementsByTagName( 'head' )[ 0 ].appendChild( style ); }

元素的 css 属性已正确更新，并且元素也已更新，例如如果用户更改高度和宽度，我会生成一个新的 css 并将其附加到头部，正确应用 css 规则并更新“场景”中的元素。但是animations 并没有发生这种情况，尽管它们看起来是正确的（它们在 Codepen 上工作）。

我生成的css是这样的：

img.CZ6kGtDWwAAcrG4 {
  height: 200px;
  widht: 200px;
}

.CZ6kGtDWwAAcrG4 {
  width: 100px !important;
  height: 100px !important;
  border-top-width: 10px;
  animation-name: cz6kgtdwwaacrg4-octopus-animation;
  animation-iteration-count: 15;
  animation-duration: 5s;
}

@keyframes cz6kgtdwwaacrg4-octopus-animation {
  9% {
    border-top-style: solid;
  }

  42% {
    border-top-style: solid;
  }

  70% {
    border-top-width: 30px;
    border-top-color: red;
    border-top-style: solid;
  }
}

知道我做错了什么吗？

Answer 1

我设法使用 React.createElement 而不是 document.createElement 解决了这个问题

    const reactElementOptions = {
        style: {
            height: '50px',
            width: '50px'
        },
        className: layer.name.split('.')[0],
        src: imgurl
    };

    const reactElement = React.createElement( 'img', reactElementOptions );

    const reactElementWrapperOptions = {
        id: layer.name,
        style: {
            position: 'absolute',
            top: y,
            left: x
        },
        onClick: () => dispatch( setSelectedLayer( layer ) )
    };
    const reactElementWrapper = React.createElement( 'span', reactElementWrapperOptions, reactElement );

    this.state.elements.push( reactElementWrapper );

    this.setState( {
        elements: this.state.elements
    } );

然后map inisde 组件而不是append

            {
                this.state.elements.map( ( el ) => el )
            }