如何使css在用jquery移除类后不忽略转换函数

Question

我使用transform函数将字符移动到位，并使用不透明度使它们在翻译过程中出现。目前，3.5秒的转换正在处理不透明度函数，但没有处理变换函数。这就产生了角色坐在终点位置而不是移动的结果。在我用jquery删除函数之前，字符都在正确的起始位置，所以我不知道我是否要用代码的另一部分覆盖translate函数。

我尝试过使用translate3d，并确保列表中的元素位于"display:inline块"中。这里有一个链接，说明为什么它需要块格式。我在这里找到的。在代码的其他部分中没有其他继承的特征。

这是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);}

我希望角色也能移动到合适的位置，而不是只是坐在他们应该结束的地方然后消失。谢谢！

Answer 1

您的代码似乎运行得很好。

我刚刚为转换添加了一个过渡，并将颜色设置为非白色，这对我来说还可以。查看下面的片段：

$(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>