Блог

Я использую Angular для своего интерфейса и хотел использовать анимацию переворачивания карт на картах. При нажатии на карту карта должна перевернуться и открыть форму. При нажатии кнопки отправить в этой форме форма должна перевернуться обратно. Я также добавил кнопку очистки в форме, которая должна очищать форму, но не переворачивать карту обратно. По какой-то причине в моей реализации щелчок очистить переворачивает форму. Вот код для card.componenet.ts

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

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css'],
  animations: [
    trigger('flipState', [
      state(
        'active',
        style({
          transform: 'rotateY(179deg)',
        })
      ),
      state(
        'inactive',
        style({
          transform: 'rotateY(0)',
        })
      ),
      transition('active => inactive', animate('500ms ease-out')),
      transition('inactive => active', animate('500ms ease-in')),
    ]),
  ],
})
export class CardComponent implements OnInit {
  constructor() {}

  ngOnInit() {}

  flip: string = 'inactive';

  toggleFlip() {
    this.flip = 'active';
  }

  toggleFlipBack() {
    this.flip = 'inactive';
  }
}

 

Вот html-код для этого компонента, как вы заметите, на данный момент я не добавил никаких функций к кнопке очистки, но она все равно откидывается назад

 <div class="tp-wrapper">
  <div class="tp-box" (click)="toggleFlip()" [@flipState]="flip">
    <div class="tp-box__side tp-box__front">Front</div>
    <div class="tp-box__side tp-box__back">
      <form (submit)="toggleFlipBack()" [@flipState]="">
        <label for="fname">First name:</label><br />
        <input type="text" id="fname" name="fname" value="John" /><br />
        <label for="lname">Last name:</label><br />
        <input type="text" id="lname" name="lname" value="Doe" /><br /><br />
        <button>Clear</button>
        <input
          type="submit"
          (click)="toggleFlipBack()"
          [@flipState]=""
          value="Submit"
        />
      </form>
    </div>
  </div>
</div>

 

Я также создал stackblitz для этого случая, на случай, если кто-то захочет поиграть с ним.

карта переворачивает стекблитц

Может кто-нибудь, пожалуйста, скажите мне, почему кнопка очистки ведет себя таким образом, без какой-либо функции, прикрепленной к ней?

Используйте type="button" . По умолчанию это так type="submit" . Обновлен StackBlitz.

Вы сталкиваетесь с поведением button элемента по умолчанию. Button элемент становится отправкой по умолчанию, когда вложен в form .

Вы можете предотвратить это поведение, добавив type атрибут со значением button , как здесь:

 <button type="button">Clear</button>