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

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

0 голосов
/ 29 августа 2018

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

Он просто вставляет новый элемент li с эффектом скольжения слева, когда дисплей ul включен flex и inline-block.

Что-то похожее на аватары чата Stackoverflow, когда кто-то присоединяется. 

@-webkit-keyframes enter {
  0%   { /*opacity:0;*/ -webkit-transform: translateX(-100%); }
  100% { /*opacity:1;*/ -webkit-transform: translateX(0px);   }
}

@-webkit-keyframes moves {
  0%   { /*opacity:0;*/ -webkit-transform: translateX(-50px); }
  100% { /*opacity:1;*/ -webkit-transform: translateX(0px);   }
  }

в моей enter анимации я начинаю с перевода -100%, потому что я хочу, чтобы мой предмет шел слева от него по размеру.

и в анимации moves я хочу переместить все ul вправо на размер входящего элемента.

Теперь я установил его жестко, на 50px, потому что мои элементы установлены на 50px: 

  li {
    width: 50px;
    height: 50px;
    display: inline-block;
    background-color: red;
  }

Как сделать так, чтобы он автоматически рассчитывал ширину ИЛИ высоту, на сколько нужно перевести ul?

Пример: Рассчитать эти 50px автоматически

1 Ответ

0 голосов
/ 29 августа 2018

Вы можете сделать это, анимируя только добавленный элемент, используя отрицательное поле: 

setTimeout(() => {
  var item = $("<li></li>").addClass("enter");
  $("ul").prepend(item).addClass('move');
}, 2000);
ul {
  display: flex;
  transition-timing-function: ease-out;
  transition: all .2s;
}

li {
  --h:50px;
  width: 50px;
  height: var(--h);
  display: inline-block;
  background-color: red;
}

.enter {
  animation: enter 1s;
}

@keyframes enter {
  0% {
    transform: translateX(-100%);
    margin-left: calc(var(--h) * -1);
  }
  100% {
    transform: translateX(0px);
    margin-left: 0
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="my-flex-thing">a</li>
  <li class="my-flex-thing">b</li>
</ul>
...