Как заставить CSS не игнорировать функцию преобразования после удаления класса с помощью jquery - PullRequest
Новая
       44

Как заставить CSS не игнорировать функцию преобразования после удаления класса с помощью jquery

0 голосов
/ 28 декабря 2018

У меня есть персонажи, которые перемещаются на место с помощью функции преобразования, и использую непрозрачность, чтобы они появлялись во время перевода.В настоящее время 3,5-секундный переход работает над функцией непрозрачности, но не над функцией преобразования.Что дает результат того, что персонажи сидят на своих конечных позициях, а не двигаются.Перед тем как удалить функцию с помощью jquery, символы находятся в правильных начальных точках, поэтому я не знаю, переопределяю ли я функцию перевода другой частью кода.

Я попытался использовать translate3d и убедился, что элементы в списке находятся в «display: inline-block».Вот ссылка , почему он должен иметь формат блока.Я нашел это здесь .В другой части кода нет других унаследованных черт.

Вот 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);}

Я бы хотел, чтобы персонажи тоже двигались на свои места, а не просто сидели там, где они должны заканчиваться и исчезать. Спасибо!

1 Ответ

0 голосов
/ 28 декабря 2018

Ваш код, кажется, работает довольно хорошо.

Я только что добавил переход для преобразования и установил цвет не белым, и он выглядит нормально для меня.Проверьте следующий фрагмент: 

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