Ivaro18 Ivaro18 - 1 year ago 97
CSS Question

Ease out background color of moving <h2>

plunker that shows the problem

This plnkr shows a screen with a login bar, when clicked it will fade up a

with some contents. When clicked on 'Down' it will transition it down.

The problem is that my
tag changes background-color as well. This results in the
flashing to white immediately when you click on 'Down'.

My code:


<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>

ts (just for toggling styles so not important but included nontheless)

export class AppComponent {

sliderToggled:boolean = false;
this.sliderToggled = false;

toggleSlider() {
this.sliderToggled = this.sliderToggled ? false : true;

css (see what I tried @

background-color: #a13b4a;
-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;
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;
/* complete liquid height based on the parent's height!! */

/* only transition on transform properties which are hardware accelerated = way better performances */
-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;
/* visible */
-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 {

/* completely offscreen */
-webkit-transform: translate(0, 80%);
-moz-transform: translate(0, 80%);
-ms-transform: translate(0, 80%);
-o-transform: translate(0, 80%);
transform: translate(0, 80%);

What I want is that during the
transition of the slider, that the h2 tag either fades the background out, or even better would be to wait untill the transition of the slider is over and then fades to white.

Answer Source

It looks as if the Angular approach that you are taking is removing the h2 and reinserting it, or something like that, instead of simply adding/removing the active class. This would prevent the transition from ever happening.

Try changing the way this is handled to just add/remove the active class from the h2 element. I do not know angular well enough to help on that end.

If you open the dev tools in Chrome on your plnkr and select the h2 element, watch what happens when you click on it. The template changes from:

      <!--template bindings={
  "ng-reflect-ng-if": "true"
}--><h2 class="login-title">Login</h2>
      <!--template bindings={
  "ng-reflect-ng-if": null


      <!--template bindings={
  "ng-reflect-ng-if": null
      <!--template bindings={
  "ng-reflect-ng-if": "true"
}--><h2 class="login-title active">Down</h2>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download