Javascript 我的转换动画不工作

试图将CSTranslation添加到我的react应用程序中，但我遇到了这个问题。 当我敲击要设置动画的元素时，它将变为空白。任何帮助都将不胜感激。这是我的密码

 render() {
    return (
        <div>
            <div id="wrapper">
                <div id="quotes-box">
                    <CSSTransition
                        in={true}
                        appear={true}
                        timeout={500}
                        classNames="fade"
                    >
                        <div className="quote-text fade" ><FontAwesomeIcon icon={faQuoteLeft} size="lg" />{this.selectedQuote ? " " + this.selectedQuote.quote + " " : ""}<FontAwesomeIcon icon={faQuoteRight} size="lg" /></div>
                    </CSSTransition>
                    <div className="quote-author" >{this.selectedQuote ? this.selectedQuote.author : ""}</div>
                    <Button className="btn btn-success btn-lg float-right" onClick={this.next}>New Quotes</Button>
                    <Button className="btn btn-success btn-lg float-left" ><FontAwesomeIcon icon={faGithub} />{"  "} Github</Button>
                </div>
                <div className="footer"> by Yakubu Ahmed El-rufai</div>
            </div>
        </div>
    )
}

---

使用

cstranslation

，您需要在中为

提供一个将要更改的值，因为您指定了true，所以它不起任何作用。在下面的解决方案中，我将一个值设置为
loaded
状态，并使用该值使
cstranslation
工作


const{Component}=React；
const{cstranslation}=反应传递组；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
加载：false
}
this.loadQuote=this.loadQuote.bind（this）
}
loadQuote（）{
this.setState（{loaded:！this.state.loaded}）；
}
render（）{
const{loaded}=this.state；
返回(
一些引文
装货报价
)
}
}
ReactDOM.render（，document.getElementById（'root'））
。淡入淡出{
不透明度：0；
}
。淡入激活状态{
不透明度：1；
过渡：不透明度500ms线性；
}
.淡出{
不透明度：1；
}
.淡入退出激活{
不透明度：0.2；
过渡：不透明度500ms线性；
}
.退场完毕{
不透明度：0；
}
.淡出{
不透明度：0；
}
。淡入淡出显示活动{
不透明度：1；
过渡：不透明度500ms线性；
}
使用
cstranslation
，您需要在
中为
提供一个会更改的值，因为您指定了true，所以它不起任何作用。在下面的解决方案中，我将一个值设置为
loaded
状态，并使用该值使
cstranslation
工作


const{Component}=React；
const{cstranslation}=反应传递组；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
加载：false
}
this.loadQuote=this.loadQuote.bind（this）
}
loadQuote（）{
this.setState（{loaded:！this.state.loaded}）；
}
render（）{
const{loaded}=this.state；
返回(
一些引文
装货报价
)
}
}
ReactDOM.render（，document.getElementById（'root'））
。淡入淡出{
不透明度：0；
}
。淡入激活状态{
不透明度：1；
过渡：不透明度500ms线性；
}
.淡出{
不透明度：1；
}
.淡入退出激活{
不透明度：0.2；
过渡：不透明度500ms线性；
}
.退场完毕{
不透明度：0；
}
.淡出{
不透明度：0；
}
。淡入淡出显示活动{
不透明度：1；
过渡：不透明度500ms线性；
}

我想，你应该用
转换
替换你的
转换
css属性：）@LevitationBalance谢谢，但它仍然不起作用。。页面呈现，但该元素是空白的。我想，您应该将
转换
css属性替换为
转换
：）@levitatombalance谢谢，但它仍然不起作用。。页面呈现，但该元素不可用blank@yrufai如果这个答案解决了你的问题，请接受它。@yrufai如果这个答案解决了你的问题，请接受它。
     //enter
   .fade-enter{
    opacity: 0;
   }
   .fade-enter-active{
    opacity: 1;
    transition: opacity 500ms linear;
   }
    //exit
   .fade-exit{
    opacity: 1;
   }
  .fade-exit-active{
  opacity: 0.2;
  transition: opacity 500ms linear ;
  }
  .fade-exit-done{
  opacity: 0;
  }

  //on load
  .fade-appear{
  opacity: 0;
  }
  .fade-appear-active{
   opacity: 1;
   transition: opacity 500ms linear ;
  }