我使用变换功能让 Angular 色移动到位,并使用不透明度使它们在翻译过程中出现。目前,3.5 秒的过渡在不透明度函数上起作用,但不在变换函数上起作用。这给出了 Angular 色坐在他们的末端位置而不是移动的结果。在我用 jquery 删除函数之前,字符位于正确的起点,所以我不知道我是否用代码的另一部分覆盖了翻译函数。
我尝试过使用 translate3d 并确保列表中的元素位于“display: inline-block”中。这是 a link为什么它需要 block 格式。我找到了here .代码的其他部分没有其他继承的特征。
这是 html 和 jquery:
<div class="intro-section">
<div class="intro-wrap">
<ul id="intro-list" class="intro-text content-hidden">
<li>W</li>
<li>E</li>
<li>L</li>
<li>C</li>
<li>O</li>
<li>M</li>
<li>E</li>
</ul>
</div>
</div>
<script type="text/javascript">
$(function() {
setTimeout(function() {
$('.intro-text').removeClass('content-hidden');
}, 500);
});
</script>
这是CSS。如您所见,我尝试了 translateY 和 translate3d,均无效:
.intro-text {
list-style: none;
}
.intro-text li {
display: inline-block;
margin-right: 50px;
font-family: '28Days';
font-weight: 300;
font-size: 4em;
color: white;
opacity: 1;
transition: opacity 3.5s ease;
}
.intro-text li:last-child {
margin-right: 0;
}
.content-hidden li {
opacity: 0;
}
.content-hidden li:nth-child(1) { transform: translateY(100px);}
.content-hidden li:nth-child(2) { transform: translate3d(0, -100px, 0);}
.content-hidden li:nth-child(3) { transform: translate3d(0, 100px, 0);}
.content-hidden li:nth-child(4) { transform: translate3d(0, -100px, 0);}
.content-hidden li:nth-child(5) { transform: translate3d(0, 100px, 0);}
.content-hidden li:nth-child(6) { transform: translate3d(0, -100px, 0);}
.content-hidden li:nth-child(7) { transform: translate3d(0, 100px, 0);}
我希望 Angular 色也能移动到位,而不是只是坐在他们应该结束的地方然后淡入。谢谢!
最佳答案
您的代码似乎运行良好。
我刚刚为变换添加了一个过渡,并将颜色设置为非白色,我觉得还不错。检查以下代码段:
$(function() {
setTimeout(function() {
$('.intro-text').removeClass('content-hidden');
}, 500);
});
.intro-text {
list-style: none;
}
.intro-text li {
display: inline-block;
margin-right: 40px;
font-family: '28Days';
font-weight: 300;
font-size: 4em;
color: red;
opacity: 1;
transition: opacity 3.5s ease, transform 3.5s ease;
}
.intro-text li:last-child {
margin-right: 0;
}
.content-hidden li {
opacity: 0;
}
.content-hidden li:nth-child(1) { transform: translateY(100px);}
.content-hidden li:nth-child(2) { transform: translate3d(0, -100px, 0);}
.content-hidden li:nth-child(3) { transform: translate3d(0, 100px, 0);}
.content-hidden li:nth-child(4) { transform: translate3d(0, -100px, 0);}
.content-hidden li:nth-child(5) { transform: translate3d(0, 100px, 0);}
.content-hidden li:nth-child(6) { transform: translate3d(0, -100px, 0);}
.content-hidden li:nth-child(7) { transform: translate3d(0, 100px, 0);}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="intro-section">
<div class="intro-wrap">
<ul id="intro-list" class="intro-text content-hidden">
<li>W</li>
<li>E</li>
<li>L</li>
<li>C</li>
<li>O</li>
<li>M</li>
<li>E</li>
</ul>
</div>
</div>
关于jquery - 使用jquery删除类后如何使css不忽略转换函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53952898/