时间戳

首页 > 解决方案 > Webkit 关键帧：使用 JavaScript 或其他计算翻译量

javascript - Webkit 关键帧：使用 JavaScript 或其他计算翻译量

问题描述

看看我创建的这个简单的 JsFiddle。

它所做的只是在显示屏打开li时从左侧插入一个具有滑动效果的新元素和。ulflexinline-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

标签： javascriptcsscss-animations

解决方案

您可以通过使用负边距仅对添加的元素进行动画处理来做到这一点：

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>

推荐阅读