代码之家 › 专栏 › 技术社区 › Ben Beri

Webkit关键帧:使用JavaScript或其他方法计算翻译量

css-animations css3 css javascript

0

Ben Beri · 技术社区 · 7 年前

它所做的只是插入一个新的 li ul 显示器打开 flex 和 inline-block .

@-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 动画,我要移动整个

现在我把它硬编码为 50px 因为我的元素设置为 :

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

我怎么能让它自动计算宽度或高度,对多少翻译 ?

例子: 自动计算这些50px

1 回复 | 直到 7 年前

1

Temani Afif 7 年前

通过使用负边距仅为添加的元素设置动画,可以执行此操作:

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>