Ivaro18 Ivaro18 - 17 days ago 7
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

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

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

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>


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

export class AppComponent {

sliderToggled:boolean = false;
constructor(){
console.log('Ok');
this.sliderToggled = false;
}

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


css (see what I tried @
h2{}
)


body{
background-color: #a13b4a;
}
/** THIS DOESN't TRANSITION */
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;
}

/** UNTILL HERE */
.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!! */
height:100%;

/* 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
0.5s
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

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

To:

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