angular中使用animation.css实现翻转展示卡片正反两面效果

html 

  
正面

  
背面

component.ts

 isFlipped: boolean = false;

  flip() {

    this.isFlipped = !this.isFlipped;
    
  }

安装插件

https://animate.style/

在angular.json中使用

"styles": [
              "node_modules/animate.css/animate.min.css",
              "src/styles.scss",
            
            ],

以上：从正面翻转到背面看得到翻转，但从背面翻转到正面

如果加上另一个方向翻装，div会消失