CSS3动画在Angular组件中不起作用

Posted 2023-03-13

【中文标题】CSS3动画在Angular组件中不起作用

【英文标题】：CSS3 animation not working inside Angular component

【发布时间】：2019-09-03 17:39:26

【问题描述】：

我一生都无法弄清楚为什么这不会触发，因为这是一件相当简单的事情。我有一个 Angular 组件，它只包含以下内容：

<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 开发工具，我可以看到它在样式标签中输出以下内容：

@-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】：

这只是一种猜测，没有看到您的组件中可能应用了哪些其他样式，但您不能将 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>