Reputation: 5366
I have two divs: .div-one
and .div-two
. Initially .div-one
is a full width div
. On a button click it reduces to 50% width and .div-two
opens from right to left with webkit animation to occupy other 50% width. This animation is smooth. Again on button click .div-one
is made to 100% width and .div-two.
is made 0% width. There is so far animation for this.
My HTML:
<div className={`div-one ${!this.state.showRegistration && !this.state.showLogin ? 'full-width' : 'half-width'}`}>
</div>
<If condition={this.state.showRegistration}>
<div className='div-two'>
</div>
</If>
My CSS:
.div-one {
background: url("../../../assets/images/manhattan-min.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
width: 100%;
min-height: 500px;
min-height: 100vh;
}
.div-one.half-width {
-webkit-animation: right-to-left-div1 0.3s forwards;
animation: right-to-left-div1 0.3s forwards;
}
.div-one.full-width{
-webkit-animation: left-to-right-div1 0.3s forwards;
animation: left-to-right-div1 0.3s forwards;
}
.div-two {
position: relative;
width: 50%;
height: 100vh;
background-color: #EEEEEE;
-webkit-animation: right-to-left-div2 0.3s forwards;
animation: right-to-left-div2 0.3s forwards;
}
@keyframes right-to-left-div1{
to {
width: 50%;
}
}
@keyframes left-to-right-div1{
to{
width:100%
}
}
@keyframes right-to-left-div2{
from{left:100%}
to{left:50%}
}
@keyframes left-to-right-div2{
from{left:0%}
to{left:50%}
}
Example ilustration:
How can I achieve the second animation i.e. .div-two
reduces from 50% to 0% to the right and div-one expands from 50% to 100% ?
Upvotes: 1
Views: 563
Reputation: 4686
Well, here's an example. In short, I'd use css transitions, not keyframes for something as simple as this.
class App extends React.Component {
constructor(props) {
super(props)
this.state = {show: false}
this.show = this.show.bind(this)
}
show() {
this.setState(prevState => ({show: !prevState.show}))
}
render() {
return (
<div className={'wrapper' + (this.state.show ? ' show' : '')}>
<div>
<button onClick={this.show}>{this.state.show ? 'hide' : 'show'}</button>
</div>
<div className="one">one</div>
<div className="two">two</div>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
body {
margin: 0;
}
.wrapper {
overflow: hidden;
white-space: nowrap;
}
.one, .two {
background: #333;
border: 2px solid #787567;
box-sizing: border-box;
color: #fff;
display: inline-block;
font-family: arial;
overflow: hidden;
padding: 20px;
text-align: center;
transition: border 0.2s, padding 0.2s, width 0.2s;
}
.one {
width: 100%;
}
.two {
border-width: 2px 0;
padding: 20px 0;
width: 0;
}
.show .one, .show .two {
border-width: 2px;
padding: 20px;
width: 50%;
}
<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>
Upvotes: 1