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

【问题标题】：How to remove an animation from a component when it is being used inside another Angular Component?在另一个 Angular 组件中使用时如何从组件中删除动画？
【发布时间】：2020-03-04 03:46:42
【问题描述】：

我创建了一个 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>

【问题讨论】：

为什么不在class="pic non-animated"这样的非动画图片中添加另一个类，然后添加另一个样式.pic .non-animated { animation: none; opacity: 1 }
只有一张图片，如果我添加一个名为 .animate 的类，当我在新组件中使用它时，该类仍然存在，因为当我们在另一个组件中使用选择器标签时，它会继承该组件的所有属性/类。

标签： html css angular angular-animations

【解决方案1】：

我建议你用一种更简单的方法来做到这一点，只需编写一个没有动画的其他 CSS 类：

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

或者尝试在你的html标签上应用[ngStyle]="{'animation-name': none}"

【讨论】：

我应该在打字稿中创建一个布尔值，然后在布尔值为真时添加该类吗？因为如果我为没有动画创建一个单独的类，那么导致动画的类仍将位于 HTML 元素上。不知何故，我们需要删除那个 .animation 类，不是吗？

【解决方案2】：

基本上你有图片样式和图片动画。因此，让我们将您的 pic 类减少为可重用

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

到目前为止，一切都很好。现在让我们定义一个类，如果出现在您的pic 上，它会生成动画

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

所以，如果pic 有animate，那么它就是动画的。如果不是，则它不是动画。

【讨论】：

但是当我将选择器标签添加到我的新组件中时，动画类仍然存在......
@MysticalMamba 只有在标签被动画化时才应该给出动画类。见：stackoverflow.com/questions/35269179/…

【解决方案3】：

所以我意识到只要动画在类'.pic'上，我的图片就会有动画。我通过为图像的样式创建一个全新的组件来解决这个问题。

因此，如果我想在图像上添加动画，我会将选择器标签导入一个新组件，并在选择器标签上添加一个名为“.animation”的类，并在 css 中创建动画。

如果我不想要动画，我只需要放置组件的选择器标签，因为图像最初没有动画。

【讨论】：