Best way to animate the hidden property on a component
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I saw in a keynote that in upcoming versions of React, it is wise to hide a component or an element with the property hidden. However, I was wondering how you could add an effect onto the transition when e.g. toggling the visibility of an element.
Here a little example. If you drop the hidden property, the transition takes place.
class App extends React.Component {
state = {
isHidden: true
}
toggle = () => {
this.setState({
isHidden: !this.state.isHidden
});
}
render() {
const className = this.state.isHidden ?
'is-hidden' : 'is-visible';
return (
<div>
<button onClick={this.toggle}>toggle</button>
<div className={'elm ' + className} hidden={this.state.isHidden}>
Hello world
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));.elm {
transition: opacity .5s ease;
}
.is-visible {
opacity: 1;
}
.is-hidden {
opacity: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>How can I use the hidden property and still use CSS transitions?
javascript css reactjs css-transitions
asked Nov 16 '18 at 16:30
ger616c64ger616c64
164
add a comment |
I saw in a keynote that in upcoming versions of React, it is wise to hide a component or an element with the property hidden. However, I was wondering how you could add an effect onto the transition when e.g. toggling the visibility of an element.
Here a little example. If you drop the hidden property, the transition takes place.
class App extends React.Component {
state = {
isHidden: true
}
toggle = () => {
this.setState({
isHidden: !this.state.isHidden
});
}
render() {
const className = this.state.isHidden ?
'is-hidden' : 'is-visible';
return (
<div>
<button onClick={this.toggle}>toggle</button>
<div className={'elm ' + className} hidden={this.state.isHidden}>
Hello world
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));.elm {
transition: opacity .5s ease;
}
.is-visible {
opacity: 1;
}
.is-hidden {
opacity: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>How can I use the hidden property and still use CSS transitions?
javascript css reactjs css-transitions
asked Nov 16 '18 at 16:30
ger616c64ger616c64
164
1
Why do you want to use thehiddenprop if transitioning opacity does what you like?
– Tholle
Nov 16 '18 at 16:49
add a comment |
I saw in a keynote that in upcoming versions of React, it is wise to hide a component or an element with the property hidden. However, I was wondering how you could add an effect onto the transition when e.g. toggling the visibility of an element.
Here a little example. If you drop the hidden property, the transition takes place.
class App extends React.Component {
state = {
isHidden: true
}
toggle = () => {
this.setState({
isHidden: !this.state.isHidden
});
}
render() {
const className = this.state.isHidden ?
'is-hidden' : 'is-visible';
return (
<div>
<button onClick={this.toggle}>toggle</button>
<div className={'elm ' + className} hidden={this.state.isHidden}>
Hello world
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));.elm {
transition: opacity .5s ease;
}
.is-visible {
opacity: 1;
}
.is-hidden {
opacity: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>How can I use the hidden property and still use CSS transitions?
javascript css reactjs css-transitions
asked Nov 16 '18 at 16:30
ger616c64ger616c64
164
I saw in a keynote that in upcoming versions of React, it is wise to hide a component or an element with the property hidden. However, I was wondering how you could add an effect onto the transition when e.g. toggling the visibility of an element.
Here a little example. If you drop the hidden property, the transition takes place.
class App extends React.Component {
state = {
isHidden: true
}
toggle = () => {
this.setState({
isHidden: !this.state.isHidden
});
}
render() {
const className = this.state.isHidden ?
'is-hidden' : 'is-visible';
return (
<div>
<button onClick={this.toggle}>toggle</button>
<div className={'elm ' + className} hidden={this.state.isHidden}>
Hello world
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));.elm {
transition: opacity .5s ease;
}
.is-visible {
opacity: 1;
}
.is-hidden {
opacity: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>How can I use the hidden property and still use CSS transitions?
class App extends React.Component {
state = {
isHidden: true
}
toggle = () => {
this.setState({
isHidden: !this.state.isHidden
});
}
render() {
const className = this.state.isHidden ?
'is-hidden' : 'is-visible';
return (
<div>
<button onClick={this.toggle}>toggle</button>
<div className={'elm ' + className} hidden={this.state.isHidden}>
Hello world
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));.elm {
transition: opacity .5s ease;
}
.is-visible {
opacity: 1;
}
.is-hidden {
opacity: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>class App extends React.Component {
state = {
isHidden: true
}
toggle = () => {
this.setState({
isHidden: !this.state.isHidden
});
}
render() {
const className = this.state.isHidden ?
'is-hidden' : 'is-visible';
return (
<div>
<button onClick={this.toggle}>toggle</button>
<div className={'elm ' + className} hidden={this.state.isHidden}>
Hello world
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));.elm {
transition: opacity .5s ease;
}
.is-visible {
opacity: 1;
}
.is-hidden {
opacity: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>javascript css reactjs css-transitions
javascript css reactjs css-transitions
asked Nov 16 '18 at 16:30
ger616c64ger616c64
164
asked Nov 16 '18 at 16:30
ger616c64ger616c64
164
asked Nov 16 '18 at 16:30
ger616c64ger616c64
164
asked Nov 16 '18 at 16:30
ger616c64ger616c64
164
asked Nov 16 '18 at 16:30
ger616c64ger616c64
164
164
1
Why do you want to use thehiddenprop if transitioning opacity does what you like?
– Tholle
Nov 16 '18 at 16:49
add a comment |
1
Why do you want to use thehiddenprop if transitioning opacity does what you like?
– Tholle
Nov 16 '18 at 16:49
1
1
Why do you want to use the
hidden prop if transitioning opacity does what you like?– Tholle
Nov 16 '18 at 16:49
Why do you want to use the
hidden prop if transitioning opacity does what you like?– Tholle
Nov 16 '18 at 16:49
add a comment |
1 Answer
1
active
oldest
votes
I don't know for sure, but I assume that the React property isHidden is doing a CSS display:none; behind the scenes. You can't transition the display property in CSS.
So if the transition is important, I'd hide the elements with CSS opacity:0 on load then add the visible class when you're ready.
answered Nov 16 '18 at 16:39
Bryce HowitsonBryce Howitson
1,469516
So I would effectively need 2 states?
– ger616c64
Nov 17 '18 at 8:57
Well you technically have 2 states now. Its just that the way React is hiding the elements isn't compatible with a transition. You would remove that and create a hidden class that's the default and then swap it out when your happy with the state of the content.
– Bryce Howitson
Nov 17 '18 at 23:04
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53341896%2fbest-way-to-animate-the-hidden-property-on-a-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I don't know for sure, but I assume that the React property isHidden is doing a CSS display:none; behind the scenes. You can't transition the display property in CSS.
So if the transition is important, I'd hide the elements with CSS opacity:0 on load then add the visible class when you're ready.
answered Nov 16 '18 at 16:39
Bryce HowitsonBryce Howitson
1,469516
So I would effectively need 2 states?
– ger616c64
Nov 17 '18 at 8:57
Well you technically have 2 states now. Its just that the way React is hiding the elements isn't compatible with a transition. You would remove that and create a hidden class that's the default and then swap it out when your happy with the state of the content.
– Bryce Howitson
Nov 17 '18 at 23:04
add a comment |
I don't know for sure, but I assume that the React property isHidden is doing a CSS display:none; behind the scenes. You can't transition the display property in CSS.
So if the transition is important, I'd hide the elements with CSS opacity:0 on load then add the visible class when you're ready.
answered Nov 16 '18 at 16:39
Bryce HowitsonBryce Howitson
1,469516
So I would effectively need 2 states?
– ger616c64
Nov 17 '18 at 8:57
Well you technically have 2 states now. Its just that the way React is hiding the elements isn't compatible with a transition. You would remove that and create a hidden class that's the default and then swap it out when your happy with the state of the content.
– Bryce Howitson
Nov 17 '18 at 23:04
add a comment |
I don't know for sure, but I assume that the React property isHidden is doing a CSS display:none; behind the scenes. You can't transition the display property in CSS.
So if the transition is important, I'd hide the elements with CSS opacity:0 on load then add the visible class when you're ready.
answered Nov 16 '18 at 16:39
Bryce HowitsonBryce Howitson
1,469516
I don't know for sure, but I assume that the React property isHidden is doing a CSS display:none; behind the scenes. You can't transition the display property in CSS.
So if the transition is important, I'd hide the elements with CSS opacity:0 on load then add the visible class when you're ready.
answered Nov 16 '18 at 16:39
Bryce HowitsonBryce Howitson
1,469516
answered Nov 16 '18 at 16:39
Bryce HowitsonBryce Howitson
1,469516
answered Nov 16 '18 at 16:39
Bryce HowitsonBryce Howitson
1,469516
answered Nov 16 '18 at 16:39
Bryce HowitsonBryce Howitson
1,469516
1,469516
So I would effectively need 2 states?
– ger616c64
Nov 17 '18 at 8:57
Well you technically have 2 states now. Its just that the way React is hiding the elements isn't compatible with a transition. You would remove that and create a hidden class that's the default and then swap it out when your happy with the state of the content.
– Bryce Howitson
Nov 17 '18 at 23:04
add a comment |
So I would effectively need 2 states?
– ger616c64
Nov 17 '18 at 8:57
Well you technically have 2 states now. Its just that the way React is hiding the elements isn't compatible with a transition. You would remove that and create a hidden class that's the default and then swap it out when your happy with the state of the content.
– Bryce Howitson
Nov 17 '18 at 23:04
So I would effectively need 2 states?
– ger616c64
Nov 17 '18 at 8:57
So I would effectively need 2 states?
– ger616c64
Nov 17 '18 at 8:57
Well you technically have 2 states now. Its just that the way React is hiding the elements isn't compatible with a transition. You would remove that and create a hidden class that's the default and then swap it out when your happy with the state of the content.
– Bryce Howitson
Nov 17 '18 at 23:04
Well you technically have 2 states now. Its just that the way React is hiding the elements isn't compatible with a transition. You would remove that and create a hidden class that's the default and then swap it out when your happy with the state of the content.
– Bryce Howitson
Nov 17 '18 at 23:04
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53341896%2fbest-way-to-animate-the-hidden-property-on-a-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Why do you want to use the
hiddenprop if transitioning opacity does what you like?– Tholle
Nov 16 '18 at 16:49