ReactCSSTransitionGroup: transitionAppear doesn't work
I'm trying to appearance/disappearance the notification, but transitionAppear doesn't work. I add item (notification popup) to the onBlur event. Animation at the time of leave works smoothly and at the time of appear it just appears abruptly without transition. In the React recently, do not swear strongly:D
P.S.
If I add ReactCSSTransitionGroup in alert.js -appear works, but leave - no.
CodeSandbox: https://codesandbox.io/s/l26j10613q
(on CodeSandbox I used ReactCSSTransitionGroup in alert.js, so appear works, but leave — no)
alert.js:
export default class Alert extends Component {
render() {
const { icon, text } = this.props;
let classNames = "cards-wrapper-alert";
return (
<div className={classNames}>
<Card zIndex="2">
<Icon icon={icon} eClass="alert-message-icon"/>
<Label text={text} fw="fw-medium" fs="fs-14" fc="c-dark"/>
</Card>
</div>
);
}
}
alert.css:
.alert-appear {
max-height: 0;
overflow: hidden;
}
.alert-appear.alert-appear-active {
max-height: 80px;
transition: max-height 300ms ease-in-out;
}
.alert-leave {
max-height: 80px;
}
.alert-leave.alert-leave-active {
max-height: 0;
overflow: hidden;
transition: max-height 300ms ease-in-out;
}
What I do in input.js:
<ReactCSSTransitionGroup
component={this.prepareComponentForAnimation}
transitionName="alert"
transitionEnter={false}
transitionAppear={true}
transitionAppearTimeout={400}
transitionLeaveTimeout={400}>
{this.state.alert ?
<Alert icon={this.state.icon} text={this.state.text}/>
: null}
</ReactCSSTransitionGroup>
Example:
javascript reactjs animation jsx reactcsstransitiongroup
asked Nov 12 '18 at 9:52
Arthur
5019
add a comment |
I'm trying to appearance/disappearance the notification, but transitionAppear doesn't work. I add item (notification popup) to the onBlur event. Animation at the time of leave works smoothly and at the time of appear it just appears abruptly without transition. In the React recently, do not swear strongly:D
P.S.
If I add ReactCSSTransitionGroup in alert.js -appear works, but leave - no.
CodeSandbox: https://codesandbox.io/s/l26j10613q
(on CodeSandbox I used ReactCSSTransitionGroup in alert.js, so appear works, but leave — no)
alert.js:
export default class Alert extends Component {
render() {
const { icon, text } = this.props;
let classNames = "cards-wrapper-alert";
return (
<div className={classNames}>
<Card zIndex="2">
<Icon icon={icon} eClass="alert-message-icon"/>
<Label text={text} fw="fw-medium" fs="fs-14" fc="c-dark"/>
</Card>
</div>
);
}
}
alert.css:
.alert-appear {
max-height: 0;
overflow: hidden;
}
.alert-appear.alert-appear-active {
max-height: 80px;
transition: max-height 300ms ease-in-out;
}
.alert-leave {
max-height: 80px;
}
.alert-leave.alert-leave-active {
max-height: 0;
overflow: hidden;
transition: max-height 300ms ease-in-out;
}
What I do in input.js:
<ReactCSSTransitionGroup
component={this.prepareComponentForAnimation}
transitionName="alert"
transitionEnter={false}
transitionAppear={true}
transitionAppearTimeout={400}
transitionLeaveTimeout={400}>
{this.state.alert ?
<Alert icon={this.state.icon} text={this.state.text}/>
: null}
</ReactCSSTransitionGroup>
Example:
javascript reactjs animation jsx reactcsstransitiongroup
asked Nov 12 '18 at 9:52
Arthur
5019
on SO RU: ru.stackoverflow.com/q/905396/280567
– Arthur
Nov 12 '18 at 11:41
Would it be possible for you to provide a codesandbox or any other reproducible example? It would be really useful.
– Maaz Syed Adeeb
Nov 15 '18 at 9:30
@MaazSyedAdeeb, take a look — codesandbox.io/s/l26j10613q
– Arthur
Nov 15 '18 at 10:28
Just a quick guess - it looks like react-addons-css-transition-group is deprecated?
– Owlvark
Nov 15 '18 at 16:38
1
@Arthur I must say this is the most comprehensive reproducible example I've encountered on SO!
– Maaz Syed Adeeb
Nov 15 '18 at 16:46
add a comment |
I'm trying to appearance/disappearance the notification, but transitionAppear doesn't work. I add item (notification popup) to the onBlur event. Animation at the time of leave works smoothly and at the time of appear it just appears abruptly without transition. In the React recently, do not swear strongly:D
P.S.
If I add ReactCSSTransitionGroup in alert.js -appear works, but leave - no.
CodeSandbox: https://codesandbox.io/s/l26j10613q
(on CodeSandbox I used ReactCSSTransitionGroup in alert.js, so appear works, but leave — no)
alert.js:
export default class Alert extends Component {
render() {
const { icon, text } = this.props;
let classNames = "cards-wrapper-alert";
return (
<div className={classNames}>
<Card zIndex="2">
<Icon icon={icon} eClass="alert-message-icon"/>
<Label text={text} fw="fw-medium" fs="fs-14" fc="c-dark"/>
</Card>
</div>
);
}
}
alert.css:
.alert-appear {
max-height: 0;
overflow: hidden;
}
.alert-appear.alert-appear-active {
max-height: 80px;
transition: max-height 300ms ease-in-out;
}
.alert-leave {
max-height: 80px;
}
.alert-leave.alert-leave-active {
max-height: 0;
overflow: hidden;
transition: max-height 300ms ease-in-out;
}
What I do in input.js:
<ReactCSSTransitionGroup
component={this.prepareComponentForAnimation}
transitionName="alert"
transitionEnter={false}
transitionAppear={true}
transitionAppearTimeout={400}
transitionLeaveTimeout={400}>
{this.state.alert ?
<Alert icon={this.state.icon} text={this.state.text}/>
: null}
</ReactCSSTransitionGroup>
Example:
javascript reactjs animation jsx reactcsstransitiongroup
asked Nov 12 '18 at 9:52
Arthur
5019
I'm trying to appearance/disappearance the notification, but transitionAppear doesn't work. I add item (notification popup) to the onBlur event. Animation at the time of leave works smoothly and at the time of appear it just appears abruptly without transition. In the React recently, do not swear strongly:D
P.S.
If I add ReactCSSTransitionGroup in alert.js -appear works, but leave - no.
CodeSandbox: https://codesandbox.io/s/l26j10613q
(on CodeSandbox I used ReactCSSTransitionGroup in alert.js, so appear works, but leave — no)
alert.js:
export default class Alert extends Component {
render() {
const { icon, text } = this.props;
let classNames = "cards-wrapper-alert";
return (
<div className={classNames}>
<Card zIndex="2">
<Icon icon={icon} eClass="alert-message-icon"/>
<Label text={text} fw="fw-medium" fs="fs-14" fc="c-dark"/>
</Card>
</div>
);
}
}
alert.css:
.alert-appear {
max-height: 0;
overflow: hidden;
}
.alert-appear.alert-appear-active {
max-height: 80px;
transition: max-height 300ms ease-in-out;
}
.alert-leave {
max-height: 80px;
}
.alert-leave.alert-leave-active {
max-height: 0;
overflow: hidden;
transition: max-height 300ms ease-in-out;
}
What I do in input.js:
<ReactCSSTransitionGroup
component={this.prepareComponentForAnimation}
transitionName="alert"
transitionEnter={false}
transitionAppear={true}
transitionAppearTimeout={400}
transitionLeaveTimeout={400}>
{this.state.alert ?
<Alert icon={this.state.icon} text={this.state.text}/>
: null}
</ReactCSSTransitionGroup>
Example:
javascript reactjs animation jsx reactcsstransitiongroup
javascript reactjs animation jsx reactcsstransitiongroup
asked Nov 12 '18 at 9:52
Arthur
5019
asked Nov 12 '18 at 9:52
Arthur
5019
edited Nov 15 '18 at 15:37
asked Nov 12 '18 at 9:52
Arthur
5019
asked Nov 12 '18 at 9:52
Arthur
5019
asked Nov 12 '18 at 9:52
Arthur
5019
5019
on SO RU: ru.stackoverflow.com/q/905396/280567
– Arthur
Nov 12 '18 at 11:41
Would it be possible for you to provide a codesandbox or any other reproducible example? It would be really useful.
– Maaz Syed Adeeb
Nov 15 '18 at 9:30
@MaazSyedAdeeb, take a look — codesandbox.io/s/l26j10613q
– Arthur
Nov 15 '18 at 10:28
Just a quick guess - it looks like react-addons-css-transition-group is deprecated?
– Owlvark
Nov 15 '18 at 16:38
1
@Arthur I must say this is the most comprehensive reproducible example I've encountered on SO!
– Maaz Syed Adeeb
Nov 15 '18 at 16:46
add a comment |
on SO RU: ru.stackoverflow.com/q/905396/280567
– Arthur
Nov 12 '18 at 11:41
Would it be possible for you to provide a codesandbox or any other reproducible example? It would be really useful.
– Maaz Syed Adeeb
Nov 15 '18 at 9:30
@MaazSyedAdeeb, take a look — codesandbox.io/s/l26j10613q
– Arthur
Nov 15 '18 at 10:28
Just a quick guess - it looks like react-addons-css-transition-group is deprecated?
– Owlvark
Nov 15 '18 at 16:38
1
@Arthur I must say this is the most comprehensive reproducible example I've encountered on SO!
– Maaz Syed Adeeb
Nov 15 '18 at 16:46
on SO RU: ru.stackoverflow.com/q/905396/280567
– Arthur
Nov 12 '18 at 11:41
on SO RU: ru.stackoverflow.com/q/905396/280567
– Arthur
Nov 12 '18 at 11:41
Would it be possible for you to provide a codesandbox or any other reproducible example? It would be really useful.
– Maaz Syed Adeeb
Nov 15 '18 at 9:30
Would it be possible for you to provide a codesandbox or any other reproducible example? It would be really useful.
– Maaz Syed Adeeb
Nov 15 '18 at 9:30
@MaazSyedAdeeb, take a look — codesandbox.io/s/l26j10613q
– Arthur
Nov 15 '18 at 10:28
@MaazSyedAdeeb, take a look — codesandbox.io/s/l26j10613q
– Arthur
Nov 15 '18 at 10:28
Just a quick guess - it looks like react-addons-css-transition-group is deprecated?
– Owlvark
Nov 15 '18 at 16:38
Just a quick guess - it looks like react-addons-css-transition-group is deprecated?
– Owlvark
Nov 15 '18 at 16:38
1
1
@Arthur I must say this is the most comprehensive reproducible example I've encountered on SO!
– Maaz Syed Adeeb
Nov 15 '18 at 16:46
@Arthur I must say this is the most comprehensive reproducible example I've encountered on SO!
– Maaz Syed Adeeb
Nov 15 '18 at 16:46
add a comment |
1 Answer
1
active
oldest
votes
I had to change your code to reproduce the exact scenario that you've shown in your .gif, by moving ReactCSSTransitionGroup to the Input component.
After reading the docs, I found this line which makes sense as to why your Alert was not animating when showing up for the first time:
ReactCSSTransitionGroup provides the optional prop transitionAppear, to add an extra transition phase at the initial mount of the component.
What is happening here is not the initial mount. The alert state is set once there is some user interaction on the input.
So, the simple answer to your question is that you need to use the enter phase, and not appear phase because of the docs that I've posted above.
answered Nov 15 '18 at 16:36
Maaz Syed Adeeb
2,11721324
1
Ty! I will test on my server and after that I will hand you a reward!=)
– Arthur
Nov 15 '18 at 16:41
I will hand your reward in 3 hours. I can't now=(
– Arthur
Nov 15 '18 at 17:43
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%2f53259591%2freactcsstransitiongroup-transitionappear-doesnt-work%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 had to change your code to reproduce the exact scenario that you've shown in your .gif, by moving ReactCSSTransitionGroup to the Input component.
After reading the docs, I found this line which makes sense as to why your Alert was not animating when showing up for the first time:
ReactCSSTransitionGroup provides the optional prop transitionAppear, to add an extra transition phase at the initial mount of the component.
What is happening here is not the initial mount. The alert state is set once there is some user interaction on the input.
So, the simple answer to your question is that you need to use the enter phase, and not appear phase because of the docs that I've posted above.
answered Nov 15 '18 at 16:36
Maaz Syed Adeeb
2,11721324
1
Ty! I will test on my server and after that I will hand you a reward!=)
– Arthur
Nov 15 '18 at 16:41
I will hand your reward in 3 hours. I can't now=(
– Arthur
Nov 15 '18 at 17:43
add a comment |
I had to change your code to reproduce the exact scenario that you've shown in your .gif, by moving ReactCSSTransitionGroup to the Input component.
After reading the docs, I found this line which makes sense as to why your Alert was not animating when showing up for the first time:
ReactCSSTransitionGroup provides the optional prop transitionAppear, to add an extra transition phase at the initial mount of the component.
What is happening here is not the initial mount. The alert state is set once there is some user interaction on the input.
So, the simple answer to your question is that you need to use the enter phase, and not appear phase because of the docs that I've posted above.
answered Nov 15 '18 at 16:36
Maaz Syed Adeeb
2,11721324
1
Ty! I will test on my server and after that I will hand you a reward!=)
– Arthur
Nov 15 '18 at 16:41
I will hand your reward in 3 hours. I can't now=(
– Arthur
Nov 15 '18 at 17:43
add a comment |
I had to change your code to reproduce the exact scenario that you've shown in your .gif, by moving ReactCSSTransitionGroup to the Input component.
After reading the docs, I found this line which makes sense as to why your Alert was not animating when showing up for the first time:
ReactCSSTransitionGroup provides the optional prop transitionAppear, to add an extra transition phase at the initial mount of the component.
What is happening here is not the initial mount. The alert state is set once there is some user interaction on the input.
So, the simple answer to your question is that you need to use the enter phase, and not appear phase because of the docs that I've posted above.
answered Nov 15 '18 at 16:36
Maaz Syed Adeeb
2,11721324
I had to change your code to reproduce the exact scenario that you've shown in your .gif, by moving ReactCSSTransitionGroup to the Input component.
After reading the docs, I found this line which makes sense as to why your Alert was not animating when showing up for the first time:
ReactCSSTransitionGroup provides the optional prop transitionAppear, to add an extra transition phase at the initial mount of the component.
What is happening here is not the initial mount. The alert state is set once there is some user interaction on the input.
So, the simple answer to your question is that you need to use the enter phase, and not appear phase because of the docs that I've posted above.
answered Nov 15 '18 at 16:36
Maaz Syed Adeeb
2,11721324
answered Nov 15 '18 at 16:36
Maaz Syed Adeeb
2,11721324
answered Nov 15 '18 at 16:36
Maaz Syed Adeeb
2,11721324
answered Nov 15 '18 at 16:36
Maaz Syed Adeeb
2,11721324
2,11721324
1
Ty! I will test on my server and after that I will hand you a reward!=)
– Arthur
Nov 15 '18 at 16:41
I will hand your reward in 3 hours. I can't now=(
– Arthur
Nov 15 '18 at 17:43
add a comment |
1
Ty! I will test on my server and after that I will hand you a reward!=)
– Arthur
Nov 15 '18 at 16:41
I will hand your reward in 3 hours. I can't now=(
– Arthur
Nov 15 '18 at 17:43
1
1
Ty! I will test on my server and after that I will hand you a reward!=)
– Arthur
Nov 15 '18 at 16:41
Ty! I will test on my server and after that I will hand you a reward!=)
– Arthur
Nov 15 '18 at 16:41
I will hand your reward in 3 hours. I can't now=(
– Arthur
Nov 15 '18 at 17:43
I will hand your reward in 3 hours. I can't now=(
– Arthur
Nov 15 '18 at 17:43
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53259591%2freactcsstransitiongroup-transitionappear-doesnt-work%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
on SO RU: ru.stackoverflow.com/q/905396/280567
– Arthur
Nov 12 '18 at 11:41
Would it be possible for you to provide a codesandbox or any other reproducible example? It would be really useful.
– Maaz Syed Adeeb
Nov 15 '18 at 9:30
@MaazSyedAdeeb, take a look — codesandbox.io/s/l26j10613q
– Arthur
Nov 15 '18 at 10:28
Just a quick guess - it looks like react-addons-css-transition-group is deprecated?
– Owlvark
Nov 15 '18 at 16:38
1
@Arthur I must say this is the most comprehensive reproducible example I've encountered on SO!
– Maaz Syed Adeeb
Nov 15 '18 at 16:46