具有淡入下拉效果的 Angular 和 CSS 动画

Posted

技术标签:

【中文标题】具有淡入下拉效果的 Angular 和 CSS 动画【英文标题】：Angular and CSS animation with fade-in drop down effect 【发布时间】：2021-07-29 05:37:24 【问题描述】：

我正在为自己开发一个投资组合网站，但我的 css 动画不断出现这种我不感兴趣的奇怪行为。在我看来，当有人访问我的网站时，标题链接应该如何工作从顶部淡入。一旦它们淡入到位，如果我将鼠标光标悬停在链接上，它应该播放一个脉动到淡入淡出的动画，并且只要鼠标光标在链接上，它就会重复。所有这些都可以正常工作。

当我尝试从顶部动画延迟淡入的初始动画时问题就出现了位置，一秒钟后第二个链接下降并淡入，然后两秒钟后第三个链接下降并淡入。如果我延迟动画，我会失去下拉效果，只有淡入效果播放。

这是所有三个链接都淡入并下降到位的 sn-p。

.myNav
    height: 64px;
    background-color: #4b5778;
    text-align: center;
    


.navItem
    margin: 18px 0px 0px 35px;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    /* color: white; */
    /* color: rgb(182, 181, 181); */
    color: greenyellow;
    /* transform: scale(1.00);
    transition: transform 1s; */


.fade-in-text
    animation: fadeIn ease-out 1s;
    -webkit-animation: fadeIn ease-out 1s;
    -moz-animation: fadeIn ease-out 1s;
    -o-animation: fadeIn ease-out 1s;
    -ms-animation: fadeIn ease-out 1s;


.navItem:hover
    /* transform: scale(1.33);
    transition: transform 1s; */
    animation: pulsate-in 1.2s ease-out infinite;
    /* color: white; */
    color: rgb(222, 255, 173);


/* pulsating text animation */
@keyframes pulsate-in 
    0% 
        transform: scale(1);
        opacity: 1;
    
    50% 
        opacity: 0.50;
    
    100% 
        transform: scale(1.25);
        opacity: 0;
    


/* fading text animation */
@keyframes fadeIn
    0% opacity: 0; margin: 0px 0px 0px 35px;
    100% opacity: 1; margin: 18px 0px 0px 35px;


/* Mozilla */
@-moz-keyframes fadeIn
    0% opacity: 0; margin: 0px 0px 0px 35px;
    100% opacity: 1; margin: 18px 0px 0px 35px;

 
/* Safari and Chrome */
@-webkit-keyframes fadeIn
    0% opacity: 0; margin: 0px 0px 0px 35px;
    100% opacity: 1; margin: 18px 0px 0px 35px;


/* Opera */
@-o-keyframes fadeIn
    0% opacity: 0; margin: 0px 0px 0px 35px;
    100% opacity: 1; margin: 18px 0px 0px 35px;

<nav class="myNav">
    <ul id="menu">
        <!-- <li (mouseover)="increment()" class="fade-in-text navItem">Intro</li> -->
        <li (click)="scroll(intro)" #intro class="fade-in-text navItem myIntro ">Intro</li>
        <li (click)="scroll(projects)" #projects class="fade-in-text navItem myProjects">Projects</li>
        <li (click)="scroll(resume)" #resume class="fade-in-text navItem myResume">Resume</li>
    </ul>
</nav>

如果我尝试做动画延迟以获得“级联”效果，这是播放动画的 sn-p。

.myNav
    height: 64px;
    background-color: #4b5778;
    text-align: center;
    


.navItem
    margin: 18px 0px 0px 35px;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    /* color: white; */
    /* color: rgb(182, 181, 181); */
    color: greenyellow;
    /* transform: scale(1.00);
    transition: transform 1s; */


.fade-in-text
    animation: fadeIn ease-out 1s;
    -webkit-animation: fadeIn ease-out 1s;
    -moz-animation: fadeIn ease-out 1s;
    -o-animation: fadeIn ease-out 1s;
    -ms-animation: fadeIn ease-out 1s;


.fade-in-text-two
    animation: fadeIn ease-out 1s 2s;
    -webkit-animation: fadeIn ease-out 1s 2s;
    -moz-animation: fadeIn ease-out 1s;
    -o-animation: fadeIn ease-out 1s;
    -ms-animation: fadeIn ease-out 1s;


.fade-in-text-three
    animation: fadeIn ease-out 1s 3s;
    -webkit-animation: fadeIn ease-out 1s 3s;
    -moz-animation: fadeIn ease-out 1s;
    -o-animation: fadeIn ease-out 1s;
    -ms-animation: fadeIn ease-out 1s;


.navItem:hover
    /* transform: scale(1.33);
    transition: transform 1s; */
    animation: pulsate-in 1.2s ease-out infinite;
    /* color: white; */
    color: rgb(222, 255, 173);


/* pulsating text animation */
@keyframes pulsate-in 
    0% 
        transform: scale(1);
        opacity: 1;
    
    50% 
        opacity: 0.50;
    
    100% 
        transform: scale(1.25);
        opacity: 0;
    


/* fading text animation */
@keyframes fadeIn
    0% opacity: 0; margin: 0px 0px 0px 35px;
    100% opacity: 1; margin: 18px 0px 0px 35px;


/* Mozilla */
@-moz-keyframes fadeIn
    0% opacity: 0; margin: 0px 0px 0px 35px;
    100% opacity: 1; margin: 18px 0px 0px 35px;

 
/* Safari and Chrome */
@-webkit-keyframes fadeIn
    0% opacity: 0; margin: 0px 0px 0px 35px;
    100% opacity: 1; margin: 18px 0px 0px 35px;


/* Opera */
@-o-keyframes fadeIn
    0% opacity: 0; margin: 0px 0px 0px 35px;
    100% opacity: 1; margin: 18px 0px 0px 35px;

<nav class="myNav">
    <ul id="menu">
        <!-- <li (mouseover)="increment()" class="fade-in-text navItem">Intro</li> -->
        <li (click)="scroll(intro)" #intro class="fade-in-text navItem myIntro ">Intro</li>
        <li (click)="scroll(projects)" #projects class="fade-in-text-two navItem myProjects">Projects</li>
        <li (click)="scroll(resume)" #resume class="fade-in-text-three navItem myResume">Resume</li>
    </ul>
</nav>

我尝试使用第 n 个类型来单独选择每个列表元素，然后尝试为每个元素分配一个类（如代码所示）。不知道为什么我不断得到这种行为。我在 Angular 上运行它。我最后的手段是在使用 TypeScript 延迟后将类“注入”到每个元素中，但如果可能的话，我宁愿以正确的方式使用 css 完成它。提前致谢！

【问题讨论】：

【参考方案1】：

这就是你要找的吗？

为您的项目提供动画值，然后将forwards 添加到您的动画中。

.fade-in-text
  opacity: 0;
  margin: 0px 0px 0px 35px;
  animation: fadeIn ease-out 1s forwards;

然后您可以使用:nth-of-type(n) 来延迟动画。

 .fade-in-text:nth-of-type(2) 
      animation-delay: .2s;
  

 .fade-in-text:nth-of-type(3) 
      animation-delay: .3s;
  


.myNav
  height: 64px;
  background-color: #4b5778;
  text-align: center;



.navItem
  margin: 18px 0px 0px 35px;
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  /* color: white; */
  /* color: rgb(182, 181, 181); */
  color: greenyellow;
  /* transform: scale(1.00);
  transition: transform 1s; */


.fade-in-text
 opacity: 0;
  margin: 0px 0px 0px 35px;
  animation: fadeIn ease-out 1s forwards;
  -webkit-animation: fadeIn ease-out 1s forwards;
  -moz-animation: fadeIn ease-out 1s forwards;
  -o-animation: fadeIn ease-out 1s forwards;
  -ms-animation: fadeIn ease-out 1s forwards;


.fade-in-text:nth-of-type(2) 
  animation-delay: .2s;


.fade-in-text:nth-of-type(3) 
  animation-delay: .3s;


.navItem:hover
  /* transform: scale(1.33);
  transition: transform 1s; */
  animation: pulsate-in 1.2s ease-out infinite;
  /* color: white; */
  color: rgb(222, 255, 173);


/* pulsating text animation */
@keyframes pulsate-in 
  0% 
      transform: scale(1);
      opacity: 1;
  
  50% 
      opacity: 0.50;
  
  100% 
      transform: scale(1.25);
      opacity: 0;
  


/* fading text animation */
@keyframes fadeIn
  0% opacity: 0; margin: 0px 0px 0px 35px;
  100% opacity: 1; margin: 18px 0px 0px 35px;


/* Mozilla */
@-moz-keyframes fadeIn
  0% opacity: 0; margin: 0px 0px 0px 35px;
  100% opacity: 1; margin: 18px 0px 0px 35px;


/* Safari and Chrome */
@-webkit-keyframes fadeIn
  0% opacity: 0; margin: 0px 0px 0px 35px;
  100% opacity: 1; margin: 18px 0px 0px 35px;


/* Opera */
@-o-keyframes fadeIn
  0% opacity: 0; margin: 0px 0px 0px 35px;
  100% opacity: 1; margin: 18px 0px 0px 35px;

<nav class="myNav">
    <ul id="menu">
        <!-- <li (mouseover)="increment()" class="fade-in-text navItem">Intro</li> -->
        <li (click)="scroll(intro)" #intro class="fade-in-text navItem myIntro ">Intro</li>
        <li (click)="scroll(projects)" #projects class="fade-in-text navItem myProjects">Projects</li>
        <li (click)="scroll(resume)" #resume class="fade-in-text navItem myResume">Resume</li>
    </ul>
</nav>

【讨论】：

是的！这就是我一直在努力实现的目标！太感谢了！为什么在这种情况下需要 forwards 属性？我认为这是暗示动画会向前发展。非常感谢您的帮助和指点！ 很高兴我能帮上忙！如果没有forwards，动画将返回原始值。删除它并测试它，看看会发生什么。【参考方案2】：

问题似乎是您正在尝试为边距设置动画，当您增加第一个元素的边距时，它也会影响其他元素并且它们变得可见。

我已经使用position: relative 和top 修复了这个问题，以便它们单独掉落（这样一个元素的属性变化不会影响另一个元素）：

.myNav 
  height: 64px;
  background-color: #4b5778;
  text-align: center;


.navItem 
  position: relative;
  margin: 18px 0px 0px 35px;
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  /* color: white; */
  /* color: rgb(182, 181, 181); */
  color: greenyellow;
  /* transform: scale(1.00);
    transition: transform 1s; */


.fade-in-text 
  animation: fadeIn ease-out 1s;


.fade-in-text-two 
  animation: fadeIn ease-out 1.5s;


.fade-in-text-three 
  animation: fadeIn ease-out 2s;


.navItem:hover 
  animation: pulsate-in 1.2s ease-out infinite;
  color: rgb(222, 255, 173);



/* fading text animation */

@keyframes fadeIn 
  0% 
    opacity: 0;
    top: -40px;
  
  100% 
    opacity: 1;
    top: 0;
  



/* pulsating text animation */

@keyframes pulsate-in 
  0% 
    transform: scale(1);
    opacity: 1;
  
  50% 
    opacity: 0.50;
  
  100% 
    transform: scale(1.25);
    opacity: 0;
  

<nav class="myNav">
  <ul id="menu">
    <!-- <li (mouseover)="increment()" class="fade-in-text navItem">Intro</li> -->
    <li (click)="scroll(intro)" #intro class="fade-in-text navItem myIntro ">Intro</li>
    <li (click)="scroll(projects)" #projects class="fade-in-text-two navItem myProjects">Projects</li>
    <li (click)="scroll(resume)" #resume class="fade-in-text-three navItem myResume">Resume</li>
  </ul>
</nav>

【讨论】：

啊好吧我明白了一点。感谢您指出我的问题所在！我被困在这两天尝试不同的选择。正如我伟大的教授曾经说过的那样，“不要在你的代码中扔垃圾，而是要深入沼泽。”

以上是关于具有淡入下拉效果的 Angular 和 CSS 动画的主要内容，如果未能解决你的问题，请参考以下文章

通过CSS实现炫酷的动画效果

jQuery基础（动画篇 animate，显示隐藏，淡入淡出，下拉切换）

css 闪烁板 - 附加动画。这是一个CSS，当图层变为活动状态时，轻弹标题淡入和下拉。你会需要

css 闪烁板 - 附加动画。这是一个CSS，当图层变为活动状态时，轻弹标题淡入和下拉。你会需要

Angular 5：路由期间的淡入淡出动画（CSS）

如何仅使用 CSS 创建淡入/淡出效果？