在 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）并将其设置为 true on focus event and to false on focusout。然后你可以在模板中使用这个属性有条件地 add/remove a css class，这将为元素应用旋转样式。

Answer 2

在 <input> 处使用 directive，它会在 :focus 上触发。这应该向卡片添加 CSS class 使其旋转。然后，在 blur:

上删除这个 class

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 link 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);
}

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

Transforming (rotate) an Element programmatically in Angular

html

css

css-transforms

typescript

angular