Angular Flip Animation

Question

I'm attempting to make a flip animation in Angular. It should flip over the Y-axis when clicked, then flip back over the Y-axis in the reverse direction when clicked again. Additionally, it should have front-side and back-side content that is displayed depending on the flip state.

The back-to-front flip is giving me grief. I'm getting odd behavior depending on what I try. The best I have been able to do is a weird flip which starts in the same direction as the front-to-back flip, then it changes direction at the end. *shrugs*

Note that if you click it before the animation finishes, it works as desired. If you wait for it to finish the animation, then it has the aforementioned behavior.

Here is the prototype: https://angular-epkrtn.stackblitz.io

Can anybody help with the back-to-front flip?

---

Copying the code from the link below

app.component.ts

import { Component } from '@angular/core';
import { trigger, transition, animate, style, keyframes, state } from '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
    animations: [
    trigger('flip', [
      state('front', style({
        transform: 'rotateY(0deg)'
      })),
      state('back', style({
        transform: 'rotateY(180deg)'
      })),
      transition('front => back', [
        animate('1s 0s ease-out',
          keyframes([
            style({
              transform: 'perspective(400px) rotateY(0deg)',
              offset: 0
            }),
            style({
              transform: 'perspective(400px) scale3d(1.5, 1.5, 1.5) rotateY(80deg)',
              offset: 0.4
            }),
            style({
              transform: 'perspective(400px) scale3d(1.5, 1.5, 1.5) rotateY(100deg)',
              offset: 0.5
            }),
            style({
              transform: 'perspective(400px) scale3d(0.95, 0.95, 0.95) rotateY(180deg)',
              offset: 0.8
            }),
            style({
              transform: 'perspective(400px) rotateY(180deg)',
              offset: 1
            })
          ]))
      ]),
      transition('back => front', [
        animate('1s 0s ease-in',
          keyframes([
            style({
              transform: 'perspective(400px) rotateY(180deg)',
              offset: 0
            }),
            style({
              transform: 'perspective(400px) scale3d(1.5, 1.5, 1.5) rotateY(100deg)',
              offset: 0.4
            }),
            style({
              transform: 'perspective(400px) scale3d(1.5, 1.5, 1.5) rotateY(80deg)',
              offset: 0.5
            }),
            style({
              transform: 'perspective(400px) scale3d(0.95, 0.95, 0.95) rotateY(0deg)',
              offset: 0.8
            }),
            style({
              transform: 'perspective(400px) rotateY(0deg)',
              offset: 1
            })
          ]))
      ])
    ])
  ]
})
export class AppComponent  {
  flipState = 'front';

  onFlipClick() {
    if (this.flipState == 'front') {
      this.flipState = 'back';
    } else {
      this.flipState = 'front';
    }
  }
}

app.component.html

<div (click)="onFlipClick()" class="flip-card">
    <div [@flip]="flipState" class="flip-card-inner">
        <div class="flip-card-front">
            FRONT
        </div>
        <div class="flip-card-back">
            BACK
        </div>
    </div>
</div>

app.component.css

.flip-card {
    height: 200px; 
    width: 200px; 
    background-color: transparent;
    margin-top: 250px;
    margin-left: auto; 
    margin-right: auto;
}

.flip-card-inner {
    position: relative;
    height: 100%;
    width: 100%;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card-inner > div {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.flip-card-front {
    background-color: blue;
}

.flip-card-back {
    transform: rotateY(180deg);
    background-color: green;
}

Answer 1

I was able to get the desired behavior with only a minor tweak to the original code. In the back => front transition, the starting value for rotateY is -180deg, not positive 180deg. Everything else is 100% identical.

  transition('back => front', [
    animate('1s 0s ease-in',
      keyframes([
        style({
          transform: 'perspective(400px) rotateY(-180deg)',
          offset: 0
        }),

Demo: https://angular-hzuxl9.stackblitz.io