使用css背面属性时角度材料输入字段不起作用答案

【问题标题】：Angular material input fields not working when using css backface property使用css背面属性时角度材料输入字段不起作用
【发布时间】：2019-09-20 22:03:20
【问题描述】：

我使用this 示例来制作3d 翻转动画

<div class="scene scene--card">
  <div class="card">
    <div class="card__face card__face--front">front</div>
    <div class="card__face card__face--back">back</div>
  </div>
</div>
<p>Click card to flip.</p>

使用下面的css

.scene {
  width: 200px;
  height: 260px;
  border: 1px solid #CCC;
  margin: 40px 0;
  perspective: 600px;
}

.card {
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
  position: relative;
}

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

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 260px;
  color: white;
  text-align: center;
  font-weight: bold;
  font-size: 40px;
  backface-visibility: hidden;
}

.card__face--front {
   background: red;
}

.card__face--back {
  background: blue;
  transform: rotateY(180deg);
}

就我而言，我的每张脸上都有表格。没有材料，所有的作品都会

Demo without material

但是当我添加材料时，我无法使用背面的输入字段（点击注册翻转）

Demo with Material

不知何故，前面的输入字段似乎干扰了背面的输入字段。我试图设置一个z-index，但这并没有做任何有用的事情。任何帮助，将不胜感激！

更新：一定是我的错误，脸上的探测器 z-index 似乎有效：https://stackblitz.com/edit/angular-backface-material-ekcays?file=src%2Fapp%2Fapp.component.ts

【问题讨论】：

我不确定您的第一个演示是否确实按预期工作。只有点击“点击卡片翻转”文字才会翻转卡片，直接点击卡片不会翻转。

标签： css angular angular-material

【解决方案1】：

.is-flipped .card__face--front {
  pointer-events: none;
}

https://stackblitz.com/edit/angular-backface-material-yrnnth?file=src/app/app.component.css

【讨论】：

很好，我必须说我试过这个，但可能做错了什么。但是为什么我们必须这样做，并且不能用像z-index 这样的其他东西来解决这个问题。无论如何，背面元素在顶部，所以我希望它可以工作
超级奇怪，现在它似乎可以在脸上使用 z-index：stackblitz.com/edit/…

【解决方案2】：

您需要将点击事件添加到卡片而不是文本：“点击卡片翻转”。将此 (click)="isFlipped=!isFlipped" 添加到卡片中：

<div class="scene scene--card" (click)="isFlipped=!isFlipped">
  <div class="card" [ngClass]="{'is-flipped': isFlipped}">
    <app-login (reg)="isFlipped = true" class="card__face card__face--front">

    </app-login>
    <app-login (reg)="isFlipped=false" class="card__face card__face--back"></app-login>
  </div>
</div>

您当然可以将此点击侦听器添加到比整个卡片更合适的任何其他元素。如果您不希望卡片在按下输入字段或按钮时翻转，您可能需要阻止事件传播。我还在“忘记密码按钮”中添加了一个点击监听器作为示例：

forgotPasswordClick(event: MouseEvent){
    event.stopPropagation();
}

Here is a working demo

【讨论】：