blocks|key|27437|text|只需使用条件class和CSS即可。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|27438|有一个像visible这样的state变量。|27439|this.state+=+{
+++visible:false
}|code-block|syntax|javascript|27440|而对于其他输入，则执行类似以下操作|27441|<input+className={this.state.visible?'fadeIn':'fadeOut'}+/>|27442|因此，根据state.visible的不同，输入将具有fadeIn或fadeOut的class。|27443|然后使用简单的CSS|27444|.fadeOut{
+++++opacity:0;
+++++width:0;
+++++height:0;
+++++transition:+width+0.5s+0.5s,+height+0.5s+0.5s,+opacity+0.5s;

}
.fadeIn{
+++++opacity:1;
+++++width:100px;
+++++height:100px;
+++++transition:+width+0.5s,+height+0.5s,+opacity+0.5s+0.5s;

}|27445|因此，每次state.visible发生变化时，class就会发生变化，transition就会发生。CSS中的transition属性基本上是用逗号分隔的所有转换。在转换中，第一个参数是要修改的属性(比如height、width等)，第二个参数是transition-duration，它是转换所用的时间，第三个参数(可选)是transition-delay，即转换启动后多少时间会发生特定属性的转换。因此，当this.state.visible变为true时，.fadeIn类将附加到该对象。transition的height和width分别需要0.5s，因此需要0.5s来增长，在它完成后，opacity转换(延迟0.5s)将触发并进一步花费0.5s来获得opacity+1。对于隐藏，它是相反的。|27446|记住让按钮上的OnClick事件处理this.state.visible的更改。|27447|entityMap^0|6|5|0|4|7|E|5|0|0|0|0|5|D|R|6|Y|7|16|5|0|0|0|5|D|O|5|10|A|1K|A|2V|6|32|5|3G|J|4K|G|5Q|I|6A|4|6G|7|6W|A|77|6|7E|5|8A|7|97|7|0|7|7|I|I|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1B|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1D|8|@$9|1E|A|1F|B|C]|$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]|$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|1M|8|@]|D|@]|E|$]]|$1|U|3|V|5|J|7|1N|8|@]|D|@]|E|$K|L]]|$1|W|3|X|5|6|7|1O|8|@$9|1P|A|1Q|B|C]|$9|1R|A|1S|B|C]|$9|1T|A|1U|B|C]|$9|1V|A|1W|B|C]|$9|1X|A|1Y|B|C]|$9|1Z|A|20|B|C]|$9|21|A|22|B|C]|$9|23|A|24|B|C]|$9|25|A|26|B|C]|$9|27|A|28|B|C]|$9|29|A|2A|B|C]|$9|2B|A|2C|B|C]|$9|2D|A|2E|B|C]|$9|2F|A|2G|B|C]|$9|2H|A|2I|B|C]|$9|2J|A|2K|B|C]]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|2L|8|@$9|2M|A|2N|B|C]|$9|2O|A|2P|B|C]]|D|@]|E|$]]|$1|10|3|-4|5|6|7|2Q|8|@]|D|@]|E|$]]]|11|$]]

Just use a conditional <code>class</code> and CSS.

Have a <code>state</code> variable like <code>visible</code>.

<pre><code>this.state = {
 visible:false
}
</code></pre>

And for the other inputs do something like

<pre><code>&lt;input className={this.state.visible?'fadeIn':'fadeOut'} /&gt;
</code></pre>

So depending upon the <code>state.visible</code> the input will have a <code>class</code> of either <code>fadeIn</code> or <code>fadeOut</code>. 

And then just use simple CSS

<pre><code>.fadeOut{
 opacity:0;
 width:0;
 height:0;
 transition: width 0.5s 0.5s, height 0.5s 0.5s, opacity 0.5s;

}
.fadeIn{
 opacity:1;
 width:100px;
 height:100px;
 transition: width 0.5s, height 0.5s, opacity 0.5s 0.5s;

}
</code></pre>

So every time the <code>state.visible</code> changes the <code>class</code> changes and the <code>transition</code> takes place. The <code>transition</code> property in CSS is basically all the transitions separated by commas. Within the transition the first argument is the property to be modified (say <code>height</code>, <code>width</code> etc), second is <code>transition-duration</code> that is the time taken for the transition and third(optional) is <code>transition-delay</code> ie how much time after the transition has been initiated does the transition for the particular property take place. So when <code>this.state.visible</code> becomes <code>true</code> the <code>.fadeIn</code> class is attached to the object. The <code>transition</code> has <code>height</code> and <code>width</code> taking 0.5s each so that will take 0.5s to grow and after it is finished the <code>opacity</code> transition (which has a delay of 0.5s) will trigger and take a further 0.5s to get <code>opacity</code> 1. For the hiding it's the reverse.

Remember to have the <code>OnClick</code> event on the button handle the changing of <code>this.state.visible</code>.

blocks|key|2486025|text|您也可以使用CSSTransitionGroup来实现这一点|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2486026|const+Example+=+({items,+removeItemHandler})+=>+{
++return+(
++++<div>
++++++<CSSTransitionGroup+transitionName="fadeInput"
++transitionEnterTimeout={500}
++transitionLeaveTimeout={300}>
++++++++{this.renderInputs().map(function(input)+{
++++++++++return+(
++++++++++++<div+key={input.id}+className="my-item"+onClick={removeItemHandler}>
++++++++++++++{item.name}
++++++++++++</div>
++++++++++);
++++++++})}
++++++</ReactCSSTransitionGroup>
++++</div>
++);
};|code-block|syntax|javascript|2486027|使用React时，有时需要在组件挂载后直接设置该组件的动画，或直接在卸载组件之前设置该组件的动画。就像在您的示例中一样，假设您映射到一个对象数组，并在应用程序中呈现一个列表。现在假设您想要添加动画来淡入已添加到数组中的新项，或在从数组中删除淡出项时将其淡出。CSSTransitionGroup组件接受transitionEnterTimeout和transitionLeaveTimeout作为道具。这些值表示的是进入和离开转换的持续时间(毫秒)。|2486028|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You could also achieve this with CSSTransitionGroup

<pre><code>const Example = ({items, removeItemHandler}) =&gt; {
 return (
 &lt;div&gt;
 &lt;CSSTransitionGroup transitionName="fadeInput"
 transitionEnterTimeout={500}
 transitionLeaveTimeout={300}&gt;
 {this.renderInputs().map(function(input) {
 return (
 &lt;div key={input.id} className="my-item" onClick={removeItemHandler}&gt;
 {item.name}
 &lt;/div&gt;
 );
 })}
 &lt;/ReactCSSTransitionGroup&gt;
 &lt;/div&gt;
 );
};
</code></pre>

When working with React, sometimes you want to animate a component directly after it has been mounted, or directly prior to it being unmounted. 
Like in your example, Let’s say you map over an array of objects and render a list in your application. Now let’s say you want to add animations to fade-in new items that have been added to the array or fade-out items as they are removed from the array.
The CSSTransitionGroup component takes in transitionEnterTimeout and transitionLeaveTimeout as props. What these values represent are the duration in milliseconds of your enter and leave transitions.

blocks|key|2486035|text|使用样式化组件实现这一点的一个简单方法...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2486036|const+Popup+=+styled.div`
++width:+200px;
++height:+200px;
++transition:+opacity+0.5s;
++opacity:+${({+showPopup+})+=>+(showPopup+?+'1'+:+'0')};
`;|code-block|syntax|javascript|2486037|2486038|<Popup+showPopup={showPopup}>
++{...}
</Popup>|2486039|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|N|8|@]|9|@]|A|$]]|$1|H|3|I|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

A simple way to achieve this with styled components...
<pre><code>const Popup = styled.div`
 width: 200px;
 height: 200px;
 transition: opacity 0.5s;
 opacity: ${({ showPopup }) =&gt; (showPopup ? '1' : '0')};
`;
</code></pre>
<hr />
<pre><code>&lt;Popup showPopup={showPopup}&gt;
 {...}
&lt;/Popup&gt;
</code></pre>

So, I am trying to fade in and fade out a set of inputs based on what button the user clicks. I tried using jQuery, but, the div was fading in and fading out at the same speed...

I am using es6 classes and react.

What I want is the user to press a button and the inputs fadeIn. Another button, the inputs fadeOut. I don't mind using jQuery, but I would like to understand how to do this with react.

<pre><code>renderInputs() {
 if (this.state.addType === "image") {
 return (
 &lt;div className="addContainer"&gt;
 &lt;input type="text" className="form-control" /&gt;
 &lt;/div&gt;
 )
 } else {
 return (
 other inputs
 )
 }
}

render() {
 return (
 &lt;CSSTransitionGroup
 transitionName="fadeInput"
 transitionEnterTimeout={500}
 transitionLeaveTimeout={300}&gt;

 {this.renderInputs()} // this doesn't work but I want this content to be conditional.

 &lt;/CSSTransitionGroup&gt;
 )
}

// SCSS
.fadeInput-enter {
 opacity: 0.01;
}

.fadeInput-enter.fadeInput-enter-active {
 opacity: 1;
 transition: opacity 500ms ease-in;
}

.fadeInput-leave {
 opacity: 1;
}

.fadeInput-leave.fadeInput-leave-active {
 opacity: 0.01;
 transition: opacity 300ms ease-in;
}
</code></pre>

ReactJS: Fade in div and fade out div based on state

jQuery

因此，我尝试根据用户单击的按钮淡入和淡出一组输入。我试过使用jQuery，但是，div以同样的速度淡入和淡出……我使用的是es6类和react。我想要的是用户按下一个按钮和输入fadeIn。另一个按钮是inputs 。我不介意使用jQuery，但我想了解如何使用react来做到这一点。renderInputs() { ...

问ReactJS:根据状态淡入和淡出div
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ReactJS:根据状态淡入和淡出divEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ReactJS:根据状态淡入和淡出div
EN