CODEWITHSUNDEEP
htmlcssangularangular-animations
MysticalMamba
MysticalMamba

Reputation: 15

How to remove an animation from a component when it is being used inside another Angular Component?

I have created an Angular Component which adds styling and some animation to a photo. I want to use the same photo styling in another component, but I don't want the animation to transfer over to the new component.

Animation on picture:

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

When I create a new component and add the selector tag of this component into the new component, the image is displayed with this animation. Is there a way I can remove this animation in the new component that I created?

A lot of you are suggesting this:

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

When i add the selector tag of this component which is <app-main-pic></app-main-pic> into the other component, that anime class is still present on the .pic, therefore the image will still get animated

New Component:

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

 <body>



</body>

Upvotes: 0

Views: 465

Answers (3)

MysticalMamba
MysticalMamba

Reputation: 15

So I realized that as long as the animation is on the class '.pic', my picture will have an animation. I solved this problem by creating a whole new component just for the styling of the image.

Therefore, if I want an animation on the image, I will import the selector tag into a new component and add a class called '.animation' on the selector tag and create the animation in the css.

If i dont want an animation, I only need to put the selector tag of the component as the image does not have an animation initially.

Upvotes: 0

Lajos Arpad
Lajos Arpad

Reputation: 76807

Basically you have a picture styling and a picture animation. So, let's reduce your pic class to be reusable

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

so far, so good. Now let's define a class, which, if present on your pic, it animates

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

so, if pic has animate, then it's animated. If not, then it's not animated.

Upvotes: 0

Arigui Ahmed
Arigui Ahmed

Reputation: 422

I suggest you an easier way to do this, just write an other CSS class without animation :

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

or try to apply [ngStyle]="{'animation-name': none}" on your html tag

Upvotes: 2

Related Questions