[英]Wrap AdobeEdge animation into React.js component
I have AdobeEdge and I need to wrap it inside React.js component. 我有AdobeEdge,需要将其包装在React.js组件中。
Component's code: 组件的代码:
let ModalWithAnimation = React.createClass({
render() {
return (
<div className="modal-dialog timeslot-modal rc5">
<div className="modal-content light-grey">
<div className="modal-body">
<div ref='stage' id="Stage" className="EDGE-18968668">
</div>
</div>
</div>
</div>
);
},
componentDidMount() {
const compId = 'EDGE-18968668';
let composition = AdobeEdge.getComposition(compId);
if (composition) {
composition.getStage().play();
return;
}
AdobeEdge.loadComposition('/static/animations/rsvp/progress', compId, {
scaleToFit: "none",
centerStage: "none",
minW: "0px",
maxW: "undefined",
width: "70px",
height: "70px"
}, {
dom: [ ]
}, {
dom: [ ]
});
}
});
So, as you see, in componentDidMount
method I'm trying to find composition by id and play it. 因此,如您所见,在
componentDidMount
方法中,我试图通过id查找组成并进行播放。 If I don't find composition, it will be loaded by AdobeEdge.loadComposition
method. 如果我找不到合成,它将通过
AdobeEdge.loadComposition
方法加载。
First time it will load correctly. 第一次将正确加载。 But when React-component (modal) shows secondly, it don't work.
但是,当第二个React-component(模式)显示时,它不起作用。
I think, problem might be because when my component (which is also bootstrap-modal) re-renders, reference to DOM-element inside AdobeEdge composition leads to another DOM-element, which is not in actual DOM. 我认为,问题可能是因为当我的组件(也是自举模式)重新渲染时,对AdobeEdge组成内的DOM元素的引用导致了另一个DOM元素,而这在实际DOM中并不存在。 I tried to change reference to actual DOM-element but it still don't work.
我试图更改对实际DOM元素的引用,但仍然无法正常工作。
What should I do in this situation? 在这种情况下我该怎么办?
Did you try calling composition.ready()
before composition.getStage().play()
? 您是否尝试过在
composition.getStage().play()
之前调用composition.ready()
composition.getStage().play()
? I have pretty much the same code as you have but that ready()
recreates the stage. 我拥有与您几乎相同的代码,但是
ready()
重新创建了舞台。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.