时间戳

首页 > 解决方案 > 在另一个 Angular 组件中使用时如何从组件中删除动画？

html - 在另一个 Angular 组件中使用时如何从组件中删除动画？

问题描述

我创建了一个 Angular 组件，它为照片添加样式和一些动画。我想在另一个组件中使用相同的照片样式，但我不希望动画转移到新组件。

图片上的动画：

.pic
{
position: relative;
height: 13em;
width: 12em;
border-radius: 50%;
margin: 2em auto 0em auto;

animation-name: pop;
animation-duration: 1.5s;
animation-delay: 3.5s;
animation-fill-mode: forwards;
opacity: 0;
}

当我创建一个新组件并将该组件的选择器标签添加到新组件中时，图像会显示此动画。有没有办法可以在我创建的新组件中删除这个动画？

很多人都在建议：

.pic
{
    position: relative;
    height: 13em;
    width: 12em;
    border-radius: 50%;
    margin: 2em auto 0em auto;

.anime
{
    animation-name: pop;
    animation-duration: 1.5s;
    animation-delay: 3.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}
}

当我将此组件的选择器标记添加<app-main-pic></app-main-pic>到另一个组件中时，该动画类仍然存在于 .pic 上，因此图像仍然会被动画化

新组件：

   <div>
     <app-main-pic></app-main-pic>
   </div>

 <body>



</body>

标签： htmlcssangularangular-animations

解决方案

我建议您使用一种更简单的方法来执行此操作，只需编写一个没有动画的其他 CSS 类：

.pic-no-animation
{
position: relative;
height: 13em;
width: 12em;
border-radius: 50%;
margin: 2em auto 0em auto;
}

或尝试应用于[ngStyle]="{'animation-name': none}"您的 html 标签

推荐阅读