How can I toggle font size on click JavaScript / Angular

Question

There are 4 steps there:

1.) Click on category

2.) Show filtered products

3.) Select filtered products

4.) Display selected products in most right part of screen /3rd child component/

What I would like to achieve is next:

When I click on product (3rd step), product is added to 'right' component, and there I would like to change a font size of quantity so it might look like animation, like make font bigger for example 28 and make it small again for example 18.

Products are added to the 3rd component by using service which is shared between child components. This is how it looks :

Thanks guys Cheers

Why did you remove all your code? This question and its answers are very confusing now :) — user736893
– user736893, Commented Jul 6, 2018 at 13:32
@ScottBeeson Ohh I did it accidentally I wanted to edited it cuz I'm still working on it, is it possible to back it up? or I need to paste code again? :S Thanks for noticing that! — Roxy'Pro
– Roxy'Pro, Commented Jul 6, 2018 at 14:08
Click the following link and rollback to the point you want: stackoverflow.com/posts/51186494/revisions — user736893
– user736893, Commented Jul 6, 2018 at 14:17

slashpm · Accepted Answer · 2018-07-05 10:51:22Z

2

First of all, add a new rule to the order-quantity-number class:

transition: font-size 1s;

then define another selector in css:

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

then basically you just need to add this 'selected' class to the span element and the font-size will be animated. After 1s (anim is completed), you need to remove the class from the element and the text will shrink. I hope it answers the question :)

EDIT: Implementation details

Template:

Add reference to the span element so that it is accessible from code

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

ts:

Add the following line to the class to use 'ref' from the template.

@ViewChild('ref') elRef: ElementRef;

Add setTimeout() call to the click handler that triggers the animation to remove selected class after 1s:

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

edited Jul 5, 2018 at 10:51

answered Jul 5, 2018 at 8:42

slashpm

2242 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Roxy'Pro Over a year ago

how can I know that After 1s (anim is completed) so I can remove a class?

slashpm Over a year ago

"transition: font-size 1s;" sets the transition of font-size to be 1 second long. so I would simply add a setTimeout() call to the click handler, which removes the selected class from the span element after this 1 second.

slashpm Over a year ago

let me know if you wanna see how to access the span element to be able to remove the class and i will extend the answer

Patryk Brejdak · Accepted Answer · 2018-07-05 08:41:45Z

You can write simple @Directive that implements AfterViewInit interface in which you will add a class with bigger font-size and then watch for event transitionend and remove class.

something like this

@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');
            }
        })
    }
}

Warning: transitionend will trigger event for every property that has transition, so we need to check if propertyName is equal to font-size.

All you need to do is create proper css class. Don't forget to import it to proper NgModule

Collectives™ on Stack Overflow

How can I toggle font size on click JavaScript / Angular

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related