Question

有4个步骤：

1。）单击类别

2。）显示已过滤的产品

3。）选择过滤的产品

4。）在屏幕/第三个子组件/

的最右侧显示所选的产品

接下来我要实现的目标是

当我单击product（第3步）时，product添加到了“正确的”组件中，在这里我想更改数量的字体大小，使其看起来像是动画，例如使字体变大，例如28，再小一点，例如18。

通过使用子组件之间共享的服务，将产品添加到第三组件。看起来就是这样：

谢谢大家干杯

Answer 1

首先，将新规则添加到order-quantity-number类中：

transition: font-size 1s;

然后在CSS中定义另一个选择器：

.order-quantity-number.selected {
   font-size: 48px;
}

然后，基本上，您只需要将此“ selected”类添加到span元素，字体大小就会被设置为动画。 1s（动画完成）之后，您需要从元素中删除该类，并且文本将缩小。我希望它能回答这个问题：）

编辑：实施细节

模板：

添加对span元素的引用，以便可以通过代码对其进行访问

<span class="order-quantity-number" #ref>{{receiptItem.quantity}}</span>

ts：

将以下行添加到类中，以使用模板中的“ ref”。

@ViewChild('ref') elRef: ElementRef;

在点击处理程序中添加setTimeout()调用，以触发动画在1秒后删除selected类：

onClick() {
    ...
    // 1. add 'selected' class to the span element
    this.elRef.nativeElement.classList.add('selected');

    // 2. remove it after 1s
    setTimeout(() => {
      this.elRef.nativeElement.classList.remove('selected');
    }, 1000);
}

Answer 2

您可以编写实现@Directive接口的简单AfterViewInit，在该接口中，您将添加一个具有更大font-size的类，然后监视事件transitionend并删除该类。

类似的东西

@Directive({
    selector: `[fontAnimation]`
})
export class FontAnimationDirective implements AfterViewInit {
    constructor(
        private hostElement: ElementRef
    ) { }

    ngAfterViewInit() {
        const el = this.hostElement.nativeElement as HTMLElement;
        el.classList.add('animate-font-size');
        el.addEventListener('animationend', (ev: TransitionEvent) => {
            if (ev.propertyName == 'font-size') {
                el.classList.remove('animation-font-size');
            }
        })
    }
}

警告：transitionend将为每个具有过渡的属性触发事件，因此我们需要检查propertyName是否等于字体大小。

您需要做的就是创建正确的css类。不要忘记将其导入到正确的NgModule

如何在单击JavaScript / Angular时切换字体大小

2 个答案: