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

【问题标题】：How can I toggle font size on click JavaScript / Angular如何在单击 JavaScript / Angular 时切换字体大小
【发布时间】：2018-07-05 08:22:01
【问题描述】：

这里有 4 个步骤：

1.) 点击类别

2.) 显示过滤后的产品

3.) 选择过滤后的产品

4.) 在屏幕的最右侧/第三个子组件/显示所选产品/

接下来我想实现的是：

当我点击产品（第 3 步）时，产品被添加到“正确”组件中，并且我想更改数量的字体大小，使其看起来像动画，例如将字体变大，例如 28 并制作它又小了，例如 18。

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

谢谢大家干杯

【问题讨论】：

为什么要删除所有代码？这个问题及其答案现在非常令人困惑:)
@ScottBeeson 哦，我不小心弄到了我想编辑它因为我还在处理它，是否可以备份它？还是我需要再次粘贴代码？ :S 感谢您注意到这一点！
点击以下链接回滚到你想要的位置：stackoverflow.com/posts/51186494/revisions

标签： javascript html css angular

【解决方案1】：

首先，在order-quantity-number类中添加一条新规则：

transition: font-size 1s;

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

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

那么基本上你只需要将这个“选定”类添加到 span 元素，字体大小就会被动画化。 1s后（动画完成），需要从元素中移除类，文字会缩小。我希望它能回答这个问题:)

编辑：实施细节

模板：

添加对 span 元素的引用，以便可以从代码中访问它

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

ts：

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

@ViewChild('ref') elRef: ElementRef;

将setTimeout()调用添加到触发动画1s后删除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);
}

【讨论】：

我怎么知道在 1s（动画完成）之后我可以删除一个类？
"过渡：字体大小 1s；"将字体大小的过渡设置为 1 秒长。所以我只需向 click 处理程序添加一个setTimeout() 调用，它会在 1 秒后从 span 元素中删除选定的类。
如果您想了解如何访问 span 元素以便能够删除类，请告诉我，我将扩展答案

【解决方案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 是否等于 font-size。

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

【讨论】：