blocks|key|3987847|text|您可以将变量设置为GreetingHeadline的父组件的状态：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3987848|constructor()+{
++this.state+=+{
++++transparent:+true;
++}
}|code-block|syntax|javascript|3987849|然后，您可以在componentDidMount生命周期的方法中使用setTimeout：|3987850|componentDidMount()+{
++this.setTimeout(()+=>+{
++++this.setState({+transparent:+false+});
++},+200);
}|3987851|最后，您可以在GreetingHeadline组件的属性中使用状态变量：|3987852|<GreetingHeadline
++styles={{+opacity:+this.state.transparent+?+'0.7'+:+'1'+}}
++id={this.props.user.id}
/>|3987853|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>You can put a variable to the state of the GreetingHeadline's parent component:</p>

<pre><code>constructor() {
  this.state = {
    transparent: true;
  }
}
</code></pre>

<p>Then you can use setTimeout in the componentDidMount lifetime's method:</p>

<pre><code>componentDidMount() {
  this.setTimeout(() =&gt; {
    this.setState({ transparent: false });
  }, 200);
}
</code></pre>

<p>Finally you can use variable from the state within your GreetingHeadline component's props:</p>

<pre><code>&lt;GreetingHeadline
  styles={{ opacity: this.state.transparent ? '0.7' : '1' }}
  id={this.props.user.id}
/&gt;
</code></pre>


blocks|key|3987908|text|设置类是更改不透明度的最简单方法。下面是一个使用动画来“平滑”过渡的示例。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3987909|https://codesandbox.io/s/j371123nq9|offset|length|3987910|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|Z|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

<p>Setting a class is the easiest way to change the opacity.  Here's an example that also uses an animation to "smooth" the transition.</p>

<p><a href="https://codesandbox.io/s/j371123nq9" rel="nofollow noreferrer">https://codesandbox.io/s/j371123nq9</a></p>


blocks|key|3987951|text|这是一个在隐藏/可见类之间使用切换的工作示例。我添加了过渡，以便更容易地看到效果(200ms是一个非常短的时间)，但你可以在你的代码中删除它。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3987952|​|3987953|class+Test+extends+React.Component+{

++constructor()+{
++++super();
++++this.state+=+{+classes:+'hidden'+};
++}

++componentDidMount()+{
++++setTimeout(()+=>+this.setState({+classes:+'visible'+}),+200);
++}

++render()+{
++++const+{+classes+}+=+this.state;
++++return+<div+className={classes}>Text+to+be+rendered</div>;
++}

}

ReactDOM.render(<Test+/>,+document.getElementById('container'));|code-block|syntax|javascript|3987954|.hidden+{+opacity:+0;+}
.visible+{+opacity:+1;+transition:+opacity+1s+linear;}|3987955|<script+src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script+src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div+id="container"></div>|3987956|3987957|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Here's a working example that uses toggles between hidden/visible classes. I've added the transition so the effect can be more easily seen (200ms is a very short time) but you can remove it in your code.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>class Test extends React.Component {

  constructor() {
    super();
    this.state = { classes: 'hidden' };
  }

  componentDidMount() {
    setTimeout(() =&gt; this.setState({ classes: 'visible' }), 200);
  }

  render() {
    const { classes } = this.state;
    return &lt;div className={classes}&gt;Text to be rendered&lt;/div&gt;;
  }

}

ReactDOM.render(&lt;Test /&gt;, document.getElementById('container'));</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.hidden { opacity: 0; }
.visible { opacity: 1; transition: opacity 1s linear;}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
&lt;div id="container"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I using ReactJS framework and I try that, this component to change its style after 200ms from <code>opacity 0</code> to <code>opacity 1</code>. Is it possible to do such a setTimeout?</p>

<pre><code>&lt;GreetingHeadline styles={?} id={this.props.user.id} /&gt;
</code></pre>


change opacity after 200ms in component style ReactJS

我使用了ReactJS框架，我尝试了一下，这个组件在200ms后将它的样式从opacity 0变成了opacity 1。有可能做这样的setTimeout吗？<GreetingHeadline styles={?} id={this.props.user.id} />

问在组件样式ReactJS中更改200ms后的不透明度
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在组件样式ReactJS中更改200ms后的不透明度EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在组件样式ReactJS中更改200ms后的不透明度
EN