0

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>
MysticalMamba
  • 15
  • 4
  • 1
    Why not add another class to the non-animated pictures like ```class="pic non-animated"``` then add another style ```.pic .non-animated { animation: none; opacity: 1 }``` – Mischa Mar 03 '20 at 16:31
  • Theres only 1 picture and if I add a class called .animate, when I use it in my new component, that class will still be there because when we use a selector tag inside another component, it inherits all properties/classes of that component. – MysticalMamba Mar 03 '20 at 19:18

3 Answers3

2

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

Kamalen
  • 766
  • 6
  • 21
Arigui Ahmed
  • 393
  • 6
  • 14
  • Should i create a boolean in typescript and then add that class if the boolean is true? Because if I create a seperate class for no animation, the class thats causing the animation will still be on the HTML element. Somehow we will need to remove that .animation class won't we? – MysticalMamba Mar 03 '20 at 19:04
0

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.

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
  • But when i add the selector tag into my new component, the animate class will still be there... – MysticalMamba Mar 03 '20 at 18:50
  • @MysticalMamba the animate class should only be given if the tag is animated. See: https://stackoverflow.com/questions/35269179/angular-conditional-class-with-ngclass – Lajos Arpad Mar 03 '20 at 19:29
0

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.

MysticalMamba
  • 15
  • 4