在 Angular 中以编程方式转换（旋转）元素

Question

我正在使用 Angular 框架进行编码。选择特定输入 (cvv) 后，我需要旋转元素 (div) (flip-card-inner)。

我不能使用 :focus，因为输入元素不是我需要旋转的元素的兄弟或子元素。

这必须以编程方式完成吗？任何帮助将不胜感激。

选择 cvv 输入时灰卡应该旋转

<div class="container">
  <p-card>
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <img
            src="../../../../../assets/creditCard.svg"
            alt="Avatar"
            style="width: 50px; height: 50px; align-self: flex-end"
          />

          <p>{{ cardNumber }}</p>
        </div>
        <div class="flip-card-back">
          <h1>John Doe</h1>
          <p>Architect & Engineer</p>
          <p>We love that guy</p>
        </div>
      </div>
    </div>

    <div class="input-container">
      <label for="cardnumber">card number</label>
      <input type="text" pInputText [(ngModel)]="cardNumber" />
    </div>

    <div class="input-container">
      <label for="cardholder">card holder</label>
      <input type="text" pInputText [(ngModel)]="cardHolder" />
    </div>

    <div class="expiry-container">
      <div class="input-expiry">
        <label for="month">month</label>
        <input style="width: 65px" type="text" pInputText [(ngModel)]="month" />
      </div>

      <div class="input-expiry">
        <label for="year">year</label>
        <input style="width: 65px" type="text" pInputText [(ngModel)]="year" />
      </div>

      <div class="input-expiry">
        <label for="cvv">cvv</label>
        <input
          class="cvv"
          style="width: 65px"
          type="text"
          pInputText
          [(ngModel)]="cvv"
        />
      </div>
    </div>
  </p-card>
</div>

css

.container{
    padding: 50px;
}

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 440px;
    height: 280px;
    border: 1px solid #f1f1f1;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
  }
  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  /* .flip-card:hover .flip-card-inner{
    transform: rotateY(180deg);
  } */

 

  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: #bbb;
    color: black;
    display: flex;
    justify-content: flex-end;
  }
  
  /* Style the back side */
  .flip-card-back {
    background-color: dodgerblue;
    color: white;
    transform: rotateY(180deg);
  }


  .input-container{
   display: flex;
   flex-direction: column;
   margin-bottom: 20px;
   margin-right: 10px;
  }

  .expiry-container{
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
    
  }

  .input-expiry{
    display: flex;
    flex-direction: column;
    margin-right: 15px;
  }

  input:focus  {
    background-color: lightgray;
  }

Answer 1

您可以在您的组件中定义一个布尔属性（如 isCVVFocused）并在 focus 事件上将其设置为 true 并设置为 false在focusout。 然后，您可以在模板中使用此属性有条件地添加/删除 css 类，这将为元素应用旋转样式。

Answer 2

在<input> 上使用directive，它会在:focus 上触发。这应该向卡片添加一个 CSS 类，使其旋转。然后，在 blur 上删除这个类：

import { Directive, ElementRef, HostListener, Input, Renderer } from '@angular/core';
@Directive({
    selector: '[onFocus]',
})
export class OnFocusDirective {
    private el: ElementRef;
   
    constructor(private _el: ElementRef, public renderer: Renderer) {
        this.el = this._el;
    }

    @HostListener('focus', ['$event']) onFocus(e) {
        // set class
    }
    
    @HostListener('blur', ['$event']) onBlur(e) {
        // reset class
    }
}

Answer 3

这就是您在 Angular 中可以做到的方式。这是stackblitz链接https://stackblitz.com/edit/angular-yca7ia?file=src/app/app.component.css

import {
  Component,
  ElementRef,
  OnInit,
  Renderer2,
  ViewChild
} from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  cardNumber;
  cardHolder;
  month;
  year;
  cvv;
  @ViewChild("cardImg", { static: false }) cardImg: ElementRef;
  constructor(private elem: ElementRef, private renderer: Renderer2) {}

  ngOnInit() {}

  onCVVFocus() {
    this.renderer.addClass(this.cardImg.nativeElement, "img-rotate");
  }

  onFocusOut() {
    this.renderer.removeClass(this.cardImg.nativeElement, "img-rotate");
  }
}

添加了以下 CSS：

.img-rotate {
  transform: rotate(90deg);
}