Question

我有一些复选框“卡片”（带有标签的不可见复选框，这些标签用作复选框的界面）的CSS动画，但是当我尝试在Angular项目中实现它时，此CSS转换停止工作。

我对Angular缺乏经验，并且正在使用一些已经编写的Angular代码。我已经弄清楚了可以使用这些复选框卡制作一个简单的动画，而我遇到的麻烦是使用循环生成的卡。它们各自具有相同的（更改）指令，并且标签具有相同的[@focusPanel]，因此，每当我检查一张卡时，它都会全部检查它们。我想单独制作这些动画，但是我不知道如何使用Angular进行动画处理。

循环代码：

<div class="checkbox-card"  *ngFor="let ancillary of ancillaryVm">
  <input type="checkbox" id="{{ancillary.id}}" value="{{ancillary.id}}" name="{{ancillary.id}}"  (change) ="updateSelectedIds($event)" />
  <label for="{{ancillary.id}}" [@focusPanel]='state'  [innerHTML]="getSafeHtml(ancillary)"></label>
</div>

component.ts的一部分：

 @Component({
  selector: 'sp-ancillary-modal',
  templateUrl: './ancillary-modal.component.html',
  animations: [
    trigger('focusPanel', [
      state('unchecked', style({
          backgroundColor: 'green'
        })),
        state('checked', style({
          backgroundColor: 'yellow' 
        })),
        transition('checked => unchecked', animate('100ms ease-in')),
         ]),
    ]
})

      updateSelectedIds(event: any) {
        if (event.target.checked) {
          this.ancillaryIdListSelected.push(event.target.name);
          this.state = 'checked';

        } else {
          this.state = 'unchecked';
          const index: number = this.ancillaryIdListSelected.indexOf(event.target.name);
          if (index !== -1) {
            this.ancillaryIdListSelected.splice(index, 1);
          }
        }
      }

如果它更有用，我已经创建了一个更简单的版本来对其进行测试（尽管此示例中没有循环）： https://stackblitz.com/edit/angular-h2fq6s

任何帮助将不胜感激-即使只是概述如何实现此目的也将是很棒的。

Answer 1

类似以下的内容可以帮助您完成此任务。

为输入分配一个TemplateRef Margin，然后在表达式中使用它来设置颜色FrameworkElement

#checkBox

我修改了Stackblitz以使用您的动画。

将TemplateRef [style.background-color]="checkBox.checked ? 'red' : 'yellow'"分配给输入，然后使用它传递给触发器<span *ngFor="let check of checkBoxes"> <input #checkBox type="checkbox" id="check" (change)="toggleMove($event)" > <label for="1" [style.background-color]="checkBox.checked ? 'red' : 'yellow'"></label> </span> ...您的#checkBox只需要调用[@focusPanel]='checkBox.checked'，它将自动切换布尔值。

(change)

然后更改动画以使其在checkBox.checked和<span *ngFor="let check of checkBoxes"> <input #checkBox type="checkbox" id="check" (change)="checkBox.checked">{{checkBox.checked}} <label for="1" [@focusPanel]='checkBox.checked'></label> </span>而不是true和false上运行...需要匹配您传递给动画触发器{的值{1}}

checked

Stackblitz

https://stackblitz.com/edit/angular-bsygjv?embed=1&file=src/app/app.component.html

Angular 2+动画：将复选框选中效果添加到由循环生成的单个复选框中

1 个答案: