Question

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

图片动画：

.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>

Answer 1

我建议您执行一个更简单的方法，只需编写另一个没有动画的CSS类：

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

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

Answer 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，则它是动画的。如果没有，那么它就没有动画。

Answer 3

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

因此，如果我要在图像上制作动画，则将选择器标签导入到新组件中，并在选择器标签上添加一个名为“ .animation”的类，然后在CSS中创建动画。

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

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

3 个答案: