角度qrcode在悬停时增长动画

Question

我想在页面的左上角显示一个qrcode，并且在输入鼠标后，我希望该qrcode进行增长动画，直到他达到某个大小X。

我创建了一个快速的小堆栈闪电战，显示了我的确切设置： https://stackblitz.com/edit/angular-bprca7

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
   name = 'Angular';
   qrsize: number = 40;

   mouseEntered(){
     console.log("entered");
     if(this.qrsize<100){
        this.qrsize+=40;
     }
   }
}

悬停时，我会收到控制台日志，但是二维码无法调整。