Как удалить анимацию из компонента, когда он используется внутри другого Angular компонента? - PullRequest
Новая
       5

Как удалить анимацию из компонента, когда он используется внутри другого Angular компонента?

0 голосов
/ 03 марта 2020

Я создал компонент 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> в другой компонент, этот аниме-класс все еще присутствует в .pi c, поэтому изображение все равно будет анимировано

Новый компонент: 

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

 <body>



</body>

Ответы [ 3 ]

2 голосов
/ 03 марта 2020

Я предлагаю вам более простой способ сделать это, просто напишите другой класс CSS без анимации: 

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

или попробуйте применить [ngStyle]="{'animation-name': none}" к тегу html

0 голосов
/ 03 марта 2020

Итак, я понял, что пока анимация относится к классу .pi c, моя картинка будет иметь анимацию. Я решил эту проблему, создав совершенно новый компонент только для стилизации изображения.

Поэтому, если я хочу анимацию на изображении, я импортирую тег селектора в новый компонент и добавлю класс с именем «.animation» в тег селектора и создаю анимацию в css.

Если я не хочу анимацию, мне нужно только поставить тег селектора компонента, так как изображение изначально не имеет анимации.

0 голосов
/ 03 марта 2020

В основном у вас есть стиль изображения и анимация изображения. Итак, давайте уменьшим ваш класс 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, то он анимируется. Если нет, то это не анимация.

...