html - 具有淡入下拉效果的 Angular 和 CSS 动画
问题描述
我正在为自己开发一个投资组合网站,但我的 css 动画不断出现这种我不感兴趣的奇怪行为。在我看来,当有人访问我的网站时,标题链接应该淡入淡出从顶部。一旦它们淡入到位,如果我将鼠标光标悬停在链接上,它应该播放一个脉动到淡入淡出的动画,并且只要鼠标光标在链接上,它就会重复。所有这些都可以正常工作。
当我尝试从顶部动画延迟淡入的初始动画时,问题就出现了,这样我就可以实现一种类似“步进”或“级联”动画,其中第一个链接下降并淡入位置,a秒后第二个链接下降并淡入,然后两秒钟后第三个链接下降并淡入。如果我延迟动画,我会失去下拉效果,只有淡入效果播放。
这是所有三个链接都淡入并下降到位的片段。
.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>
如果我尝试执行动画延迟以获得“级联”效果,这是播放的动画片段。
.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 完成它。提前致谢!
解决方案
这是你要找的吗?
为您的项目提供动画值,以开始并添加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>
推荐阅读
- c++ - 将函数对象分配给函数包装器后的意外行为
- firebase-realtime-database - 使用 Firebase 规则防止空数据库路径
- swift - 将 Moya 响应错误转换为定义的类型
- apache-spark - PSQLException:错误:“WITH”处或附近的语法错误
- google-apps-script - 通过单击按钮在 Google 电子表格中的工作表之间跳转
- azure - 为什么我不能在没有访问所有其他数据库的情况下导入数据层应用程序?
- linux - 为什么单个 go 子例程调用多个克隆系统调用?
- powerbi - 转换为整数幂 bi
- docker - 构建docker镜像时的权限问题
- c++ - 将单个变量的值从主机复制到设备变量