文本没有过渡到父元素,它只是立即弹出
Text is not transitioning in with parent element, it just pops up immediately
如果服务器响应错误消息,我会弹出一个栏。
例如,如果他们输入了错误的登录凭据,该栏将 transition: height 0.5s ease-in
显示来自服务器的错误消息,指出凭据不正确。
在一些帮助下,我确实让栏过渡工作了。我现在遇到的问题是在转换完成之前呈现文本,所以它看起来很奇怪。以为它会继承父级的样式,但事实并非如此。无法识别 transition/animation.
这是我的组件:
renderMessage() {
const { errors } = this.props;
if (errors) {
return (
<div
className={
errors
?
'hide-error-message show-error-message'
:
'hide-error-message'
}
>
<i
onClick={ this.closeMessage }
className='float-right fas fa-times'>
</i>
<div
dangerouslySetInnerHTML={{ __html: errors.non_field_errors[0] }}>
</div>
</div>
);
}
}
render() {
const { errors } = this.props;
return (
<div id='error-messages'>
<div
className={
errors
?
'hide-error-messages-bar show-error-messages-bar'
:
'hide-error-messages-bar'
}>
<Container>{ this.renderMessage() }</Container>
</div>
</div>
)
}
这是 Sass 的最新版本。尝试了大约 20 种其他东西:
#error-messages {
position: relative;
top: 105px;
background-color: $croner-red;
color: #FFF;
.hide-error-messages-bar {
visibility: hidden;
height: 0;
transition: height 0.5s ease-out;
}
.hide-error-messages-bar.show-error-messages-bar {
visibility: visible;
transition: height 0.5s ease-in;
height: 65px;
width: 100%;
.hide-error-message {
opacity: 0;
height: 0;
padding: 8px 0;
transition: opacity 2s ease-in;
}
.hide-error-message.show-error-message {
opacity: 1;
i {
cursor: pointer;
}
}
}
}
调高 transform: translateY()
的高度过渡。由于您的通知栏不在流程中并且不会影响任何其他元素,只需将其上下移动 Y 访问即可。您可以保持 div 的高度,这样文字就不会发生变化和乱七八糟。
这是一个codepen,用https://codepen.io/anon/pen/oyZPJQ
按钮切换class
.hide-error-messages-bar {
transform: translateY(-100vh);
transition: transform 0.5s ease-out;
}
.hide-error-messages-bar.show-error-messages-bar {
transform: translateY(5vh);
width: 100%;
}
如果服务器响应错误消息,我会弹出一个栏。
例如,如果他们输入了错误的登录凭据,该栏将 transition: height 0.5s ease-in
显示来自服务器的错误消息,指出凭据不正确。
在一些帮助下,我确实让栏过渡工作了。我现在遇到的问题是在转换完成之前呈现文本,所以它看起来很奇怪。以为它会继承父级的样式,但事实并非如此。无法识别 transition/animation.
这是我的组件:
renderMessage() {
const { errors } = this.props;
if (errors) {
return (
<div
className={
errors
?
'hide-error-message show-error-message'
:
'hide-error-message'
}
>
<i
onClick={ this.closeMessage }
className='float-right fas fa-times'>
</i>
<div
dangerouslySetInnerHTML={{ __html: errors.non_field_errors[0] }}>
</div>
</div>
);
}
}
render() {
const { errors } = this.props;
return (
<div id='error-messages'>
<div
className={
errors
?
'hide-error-messages-bar show-error-messages-bar'
:
'hide-error-messages-bar'
}>
<Container>{ this.renderMessage() }</Container>
</div>
</div>
)
}
这是 Sass 的最新版本。尝试了大约 20 种其他东西:
#error-messages {
position: relative;
top: 105px;
background-color: $croner-red;
color: #FFF;
.hide-error-messages-bar {
visibility: hidden;
height: 0;
transition: height 0.5s ease-out;
}
.hide-error-messages-bar.show-error-messages-bar {
visibility: visible;
transition: height 0.5s ease-in;
height: 65px;
width: 100%;
.hide-error-message {
opacity: 0;
height: 0;
padding: 8px 0;
transition: opacity 2s ease-in;
}
.hide-error-message.show-error-message {
opacity: 1;
i {
cursor: pointer;
}
}
}
}
调高 transform: translateY()
的高度过渡。由于您的通知栏不在流程中并且不会影响任何其他元素,只需将其上下移动 Y 访问即可。您可以保持 div 的高度,这样文字就不会发生变化和乱七八糟。
这是一个codepen,用https://codepen.io/anon/pen/oyZPJQ
按钮切换class .hide-error-messages-bar {
transform: translateY(-100vh);
transition: transform 0.5s ease-out;
}
.hide-error-messages-bar.show-error-messages-bar {
transform: translateY(5vh);
width: 100%;
}