Check out this plunker demonstrating the issue
This plnkr showcases a login interface with a sliding div that appears when clicked. Clicking on 'Down' will smoothly transition it back down.
The issue lies in my <h2> tag, which also changes its background-color causing it to flash white immediately when clicking 'Down'.
Here is my code:
HTML
<div class="login-container">
<div [class]="sliderToggled ? 'slider opened' : 'slider closed'">
<h2 *ngIf="!sliderToggled" class="login-title" (click)="toggleSlider()">Login</h2>
<h2 *ngIf="sliderToggled" class="login-title active" (click)="toggleSlider()">Down</h2>
<button class="button" (click)="login()" ion-button block>Log in</button>
</div>
</div>
TypeScript (only for toggling styles, but included for reference)
export class AppComponent {
sliderToggled:boolean = false;
constructor(){
console.log('Ok');
this.sliderToggled = false;
}
toggleSlider() {
this.sliderToggled = this.sliderToggled ? false : true;
}
}
CSS (refer to what I tried @ h2{})
body{
background-color: #a13b4a;
}
h2{
-webkit-transition: background .5s linear;
-moz-transition: background .5s linear;
-ms-transition: background .5s linear;
transition: background .5s linear;
}
.login-title {
height: 20%;
background-color: white;
width: 100%;
color: #a13b4a;
text-align: center;
}
.login-title.active {
height: 20%;
width: 100%;
background-color: #a13b4a;
color: white;
}
.login-container {
position: fixed;
left: 0px;
bottom: 0px;
height: 60%;
width: 100%;
}
.slider {
overflow-y: scroll;
height:100%;
-webkit-transition:-webkit-transform .5s ease;
-moz-transition: -moz-transform .5s ease;
-ms-transition: -ms-transform .5s ease;
-o-transition: -o-transform .5s ease;
transition: transform .5s ease;
}
.slider.opened {
background-color: #a13b4a;
-webkit-transform: translate(0, 0%);
-moz-transform: translate(0, 0%);
-ms-transform: translate(0, 0%);
-o-transform: translate(0, 0%);
transform: translate(0, 0%);
}
.slider.closed {
-webkit-transform: translate(0, 80%);
-moz-transform: translate(0, 80%);
-ms-transform: translate(0, 80%);
-o-transform: translate(0, 80%);
transform: translate(0, 80%);
}
I want the <h2> tag to smoothly transition alongside the slider, fading to white once the slider transition is complete.