CSS3 анимация не работает внутри углового компонента - PullRequest
Новая
       14

CSS3 анимация не работает внутри углового компонента

0 голосов
/ 13 апреля 2019

Не могу понять, почему это не срабатывает, потому что это довольно простая вещь.У меня есть угловой компонент, который просто содержит следующее: 

<a href="#services">Click</a>

В CSS соответствующего компонента у меня есть это: 

@keyframes bounce{
    0% { transform: translateY(0px); }
    50% { transform: translateY(5px); }
    100% { transform: translateY(0px); }
}
a{
    font-size: 3rem;
    margin: 0 auto;
    text-decoration: none;
    transition: all 0.2s;
    animation: bounce 1.5s infinite;
}

Используя инструменты Chrome Dev, я вижу, что он выводитследующие в теге стиля: 

@-webkit-keyframes bounce{
    0% { -webkit-transform: translateY(0px); transform: translateY(0px); }
    50% { -webkit-transform: translateY(5px); transform: translateY(5px); }
    100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@keyframes bounce{
    0% { -webkit-transform: translateY(0px); transform: translateY(0px); }
    50% { -webkit-transform: translateY(5px); transform: translateY(5px); }
    100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
}
a[_ngcontent-c3]{
    font-size: 3rem;
    margin: 0 auto;
    text-decoration: none;
    transition: all 0.2s;
    -webkit-animation: bounce 1.5s infinite;
            animation: bounce 1.5s infinite;
}

Кажется, что все указывает на правильный элемент, но анимация не работает вообще.Есть мысли?

1 Ответ

2 голосов
/ 13 апреля 2019

Это скорее предположение, не видя, какие другие стили могут быть применены в вашем компоненте, но вы не можете добавить CSS-анимацию к элементам inline. Если вы добавите display: inline-block или position: absolute к тегу <a>, он будет работать: 

@-webkit-keyframes bounce{
    0% { -webkit-transform: translateY(0px); transform: translateY(0px); }
    50% { -webkit-transform: translateY(5px); transform: translateY(5px); }
    100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
}
@keyframes bounce{
    0% { -webkit-transform: translateY(0px); transform: translateY(0px); }
    50% { -webkit-transform: translateY(5px); transform: translateY(5px); }
    100% { -webkit-transform: translateY(0px); transform: translateY(0px); }
}
a[_ngcontent-c3]{
    font-size: 3rem;
    margin: 0 auto;
    text-decoration: none;
    transition: all 0.2s;
    -webkit-animation: bounce 1.5s infinite;
            animation: bounce 1.5s infinite;
}

a.inline-block {
    display: inline-block;
}
<a href="#services" _ngcontent-c3>Click</a> &lt;= not working | working with <code>display: inline-block;</code> =&gt;
<a href="#services" _ngcontent-c3 class="inline-block">Click</a>
...