使用 jquery 删除 class 后，如何使 css 不忽略变换函数

Question

我使用变换功能让角色移动到位，并使用不透明度使它们在翻译过程中出现。目前，3.5 秒的过渡在不透明度函数上起作用，但不在变换函数上起作用。这给出了角色坐在他们的末端位置而不是移动的结果。在我用 jquery 删除函数之前，字符位于正确的起始点，所以我不知道我是否用代码的另一部分覆盖了翻译函数。

我尝试使用 translate3d 并确保列表中的元素在 "display: inline-block" 中。这里是 a link to why it needs to be block format. I found it 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);}

我希望角色也能移动到位，而不是只是坐在它们应该结束的地方然后淡入。谢谢！

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>

使用 jquery 删除 class 后，如何使 css 不忽略变换函数

How to make css not ignore transform function after removing class with jquery

html

css

jquery

css-transitions

css-transforms