A challenge arises with the error bar, which should ease-in when error = true.
Within the render() method:
render() {
const { errors } = this.props;
return (
<div id='messages'>
<div className={ errors ? 'show-messages' : 'hidden-messages' }>
<Container>{ this.renderMessage() }</Container>
</div>
</div>
)
}
If a user attempts to log in and receives invalid credentials, the server will respond by setting this.props.errors to true and displaying show-messages.
The desired behavior is for the bar to ease-in.
The latest CSS attempt is shown below:
.hidden-messages {
visibility: hidden;
transition: width 2s, height 2s;
-webkit-transition: width 2s, height 4s;
transition-delay: 5s;
}
.show-messages {
visibility: visible;
background-color: #FFF;
transition: width 2s, height 2s;
-webkit-transition: width 2s, height 4s;
transition-delay: 5s;
}
Initially tried solely using transition:, then added transition-delay as suggested. Still encountered issues.
It seems that the ternary operator acts as an on/off switch without establishing a clear link between .hidden-messages and .show-messages. How can this issue be addressed?
UPDATE: Attempts to implement suggestions from Jason McFarlane's CodePen example failed to yield results.
With reference to a specific statement, modifications were made:
To toggle between hide/show states, apply an additional class along with the default state.
For instance, if default is to show messages, maintain that class on the respective div.
Since the default state is hide-messages, adjustments were made accordingly. However, changing the ternary from show-messages.hide-messages to show-messages hide-messages` did not achieve the intended outcome despite aligning with the DOM structure observed in the CodePen example.
import React, { Component } from 'react';
// rest of the code...
@import 'declarations';
#messages {
position: relative;
top: 105px;
.hide-messages {
visibility: hidden;
height: 0;
width: 0;
}
.hide-messages.show-messages {
visibility: visible;
background-color: $red;
transition: height 5s ease-in !important;
height: 100%;
width: 100%;
}
.alert-danger {
background-color: $red;
margin-bottom: 0;
border: none;
padding-left: 0;
padding-right: 0;
color: white;
i {
cursor: pointer;
}
}
}
Shown above is the current configuration. The objective is to have a red banner easing in as the default behavior.