How to set animation to flip to a different component in angular?-CodePudding

First question here. Please bear if I missed out anything. I'll try to add more details as soon as mentioned.

In my angular project, I have regular login and register form components and want to implement the flip animation to transition between them. On click, the parent div has a flip animation and it "flips" from one component "front" to another "back" and vice-versa. The problem is that since the "back" component goes through transform: rotateY(180deg); the component's form field and animations don't work properly. Due to this, even simple hover animations did not work as expected.

How should I implement this transition for both components animations to work as expected? Thank you for your time!

I followed the flip animation method given here but it is probably works fine just for display data and has problems when we put in a component with animations to the "back" side.

Adding a gif for better understanding of the entire problem : Entire problem in working

CodePudding user response：

It's difficult know what happens.

I imagine you have any kind of confict with the name of some class of there're a problem using position absolute in your cards. check the "z-index" of your class. (I feel that the "border" you see is the border or the input in "front" - try enclosed each "face" in a div with position relative-)

With this .css

.scene {
  perspective: 600px;
  max-width:400px;
  margin:auto auto 1rem;

}
.card {
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  background: white;

}
.card__face {
  float:left;
  width:100%;
  margin-right: -100%;
  backface-visibility: hidden;
}

.card__face div{
  padding:1rem; 
  background: white;
  display:flex;
  flex-direction: column;
  backface-visibility: hidden;
}
.card::after{
  display:block;
    content:'';
    clear:both;
}

.card__face--back {
  transform: rotateY( 180deg );
}
.card.is-flipped {
  transform: rotateY(180deg);
}

And this .html

<div >
  <div #card  [class.is-flipped]="toogle">
    <div >
      <div>
        <mat-form-field appearance="outline">
          <mat-label>Input front</mat-label>
          <input matInput />
        </mat-form-field>
        <button mat-raised-button color="primary" (click)="toogle=!toogle">
          click
        </button>
      </div>
    </div>
    <div >
      <div>
        <mat-form-field appearance="outline">
          <mat-label>Input back</mat-label>
          <input matInput />
        </mat-form-field>
        <button mat-raised-button color="accent" (click)="toogle=!toogle">
          click
        </button>
      </div>
    </div>
  </div>
</div>

In this stackblitz that use material-angular looks like work

NOTE: It's necessary add in styles.css

.scene .mat-mdc-raised-button .mdc-button__label{
  z-index: 0;
}

Because the raised-button add to the span a z-index:0