Webkit关键帧：使用JavaScript或其他计算转换量

Question

Take a look at this simple JsFiddle I created .

What it does is simply inserts a new li element with a slide effect from left, when the ul display is on flex and inline-block .

Something similar to that is Stackoverflow chat avatars when someone joins.

@-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);   }
  }

in my enter animation, I start with translate -100% because I want my item come from left distanced by his size.

and in the moves animation, I want to move the whole ul to the right, by the size of the entering element.

Now I set it hard-coded, to 50px because my elements are set to 50px :

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

How can I make it calculate the width OR height automatically, on how much to translate the ul ?

Example: Calculate these 50px automatically

Answer 1

You can do this by animating only the added element by using negative margin:

 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>