CSS - Анимация всей ul, а не только первой строки при вводе нового элемента

Взгляните на этот простой JsFiddle я сделал, который анимирует новые элементы, которые входят в список.

Однако анимация влияет только на первую строку, а не на все строки. Я сделал цвета случайными, так что вы действительно можете видеть «скачки» на других строках, когда вставляется новый элемент.

Есть ли способ заставить его влиять на все строки только с помощью CSS?

@keyframes enter {
  0% {
    transform: translateX(-100%);
    margin-left: calc(var(--w) * -1);
  }
  100% {
    transform: translateX(0px);
    margin-left: 0
  }
}

Это моя анимация, и это элемент моего списка:

.slidepush li {
  --w: 50px;
  width: var(--w);
  height: 50px;
  background-color: red;
  vertical-align: top;


  border: 0;
  padding: 0;
  margin: 0;
  display: inline-block;
}

.enter {
  animation: enter 1s;
}

Создан простой класс, который управляет ul и реализует add:

class SlidePush {

    constructor(ulElement) {
    this.element = ulElement;
  }

  add(item) {
    this.element.prepend(item.addClass('enter'));
  }
}

const sp = new SlidePush($(".slidepush"));

setInterval(() => {//
  var colors = ['red', 'blue', 'green', 'black'];
  var color = colors[Math.floor(Math.random() * colors.length)];
  sp.add($("<li style='background-color:" + color +" !important;'></li>"));
}, 1000);

javascript css css-animations

29.08.2018 03:01

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

274

Ответы 2

Вы можете добавить анимацию с учетом nth-child, чтобы всегда добавлять ее к первой в каждой строке. Вам также необходимо удалить анимацию после того, как она будет завершена, чтобы иметь возможность снова добавить ее к тому же элементу, когда она достигнет следующей строки.

class SlidePush {

	constructor(ulElement) {
  	this.element = ulElement;
  }
  
  add(item) {
  	this.element.prepend(item);
    $('.slidepush li:nth-child(4n+1)').addClass('enter');
    setTimeout(function(){ $('.slidepush li:nth-child(4n+1)').removeClass('enter') }, 1000);
  }
}

const sp = new SlidePush($(".slidepush"));

setInterval(() => {//
var colors = ['red', 'blue', 'green', 'black'];
var color = colors[Math.floor(Math.random() * colors.length)];
sp.add($("<li style='background-color:" + color +" !important;'></li>"));
}, 1200);

div {
--w: 200px;
  max-width: var(--w);
}


.slidepush {
  list-style: none;
  border: 0;
  padding: 0;
  margin: 0;
  display: table;
  }

.slidepush li {
  --w: 50px;
  width: var(--w);
  height: 50px;
  background-color: red;
  vertical-align: top;

  
  border: 0;
  padding: 0;
  margin: 0;
  display: inline-block;
}
      
.enter {
  animation: enter 1s;
  position:relative;
  z-index:-1;
}
      
@keyframes enter {
  0% {
    transform: translateX(-100%);
    margin-left: calc(var(--w) * -1);
  }
  100% {
    transform: translateX(0px);
    margin-left: 0;
  }
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul class = "slidepush">

  </ul>
</div>

Проблема в том, что он имеет случайные скачки, он не плавный и работает только для фиксированной ширины (например, 200 пикселей).

— 29.08.2018 03:34

@Jony Ну, я пробовал много способов, и это непросто ... ты что-нибудь задумал по поводу анимации? если вы можете сделать статический пример того, как вы хотите, чтобы он выглядел, это может помочь

— 29.08.2018 16:50

29.08.2018 03:20

Не могли бы вы попробовать следующий код.

class SlidePush {

  constructor(ulElement) {
    this.element = ulElement;
  }

  add(item) {
    $('.slidepush li').removeClass('enter');
    $('.slidepush li').removeClass('push');
    $('.slidepush li:nth-child(4n+1)').addClass('push');
    this.element.prepend(item.addClass('enter'));
  }
}

const sp = new SlidePush($(".slidepush"));

setInterval(() => { //
  var colors = ['red', 'blue', 'green', 'black'];
  var color = colors[Math.floor(Math.random() * colors.length)];
  sp.add($("<li style='background-color:" + color + " !important;'></li>"));
}, 1000);

div {
  --w: 200px;
  max-width: var(--w);
}

.slidepush {
  list-style: none;
  border: 0;
  padding: 0;
  margin: 0;
  display: table;
}

.slidepush li {
  --w: 50px;
  width: var(--w);
  height: 50px;
  background-color: red;
  vertical-align: top;
  border: 0;
  padding: 0;
  margin: 0;
  display: inline-block;
}

.enter {
  animation-name: enter;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.push {
  animation-name: push;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes push {
  0% {
    margin-left: calc(var(--w) * -1);
  }
  100% {
    margin-left: 0
  }
}

@keyframes enter {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0px);
  }
}

<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<div>
  <ul class = "slidepush">

  </ul>
</div>

Опять же, это не гладко, он немного выдает баги каждый раз, когда вставляется элемент.

— 29.08.2018 15:09

29.08.2018 13:30

Другие вопросы по теме

Добавление CSS в цикл foreach для массива

Карты начальной загрузки правильно сложены

Вставить элемент в нижнюю часть родительского

Остановить анимацию, когда указатель мыши находится над рамкой, и анимировать ее обратно, когда указатель мыши выключен, не работает

Как выровнять изображения по центру и наложить текст при наведении?

Настраиваемая стрелка раскрывающегося списка выбора не работает

Сделайте так, чтобы элементы перекрывались слева и выровнялись по правому краю

Как создать круговой прогресс внутри компонента Vue

Ключевые кадры Webkit: рассчитайте сумму перевода с помощью JavaScript или другого

Как создать динамическую сетку с помощью vue?

CSS - Анимация всей ul, а не только первой строки при вводе нового элемента

Ответы 2

Другие вопросы по теме

Похожие вопросы