javascript - JS/jQuery:<li>是否有延迟旋转/缩放？奇怪的CSS

好的，从来没有在JS和CSS中做过这样的事情，但是我试图通过圆形扩展div中的一些按钮以及最左侧旋转的静态“ x”按钮来实现这种效果。 https://dribbble.com/shots/3445331-Expanding-Button

无论出于什么原因，我都无法以每一个li越来越多的延迟来进行过渡。我要做的是向包含lis的ul中添加“ pill”类（以使其显示：无阻止），然后向各个lis中添加“ pill”类。

$('.top-left').hover(function(){
  $(this).toggleClass("pill");
  $('.top-left ul').toggleClass("pill");
  $('.top-left img').toggleClass("pill");
  $('.top-left ul li').each(function(i, elem) {
    $(elem).delay(i * 800).toggleClass("pill");
  });
});

.top-left ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 35px;
  margin-left: 0;
  display: none;
  transform: translate(20px, -46px);
}

.top-left img {
  margin: auto;
  width: 40px;
  display: table;
  margin: 0 auto 10px;
  margin-top: 6px;
  transition-timing-function: cubic-bezier(0, 1.4, 1, 1);
  transition-duration: 205ms;
}

.top-left img.pill {
  display: block;
  margin-left: 15px;
  transform: rotate(90deg);
  transition-timing-function: cubic-bezier(0, 1.4, 1, 1);
  transition-duration: 250ms;
}

.top-left ul li {
  cursor: pointer;
  padding-right: 10px;
  float: left;
  transition-timing-function: cubic-bezier(0, 1.4, 1, 1);
  transition-duration: 250ms;
  transform: scale(0.01,0.01) rotate(-30deg) translate(43px, 0px);
}

.top-left ul li.pill:hover {
  color: #fff;
}

.top-left {
  width: 55px;
  height: 55px;
  border-radius: 55px;
  transition: width ease 0.3s;
  margin-top: 15px;
  background: #4d4d4d;
  border: 4px solid #333;
}

.top-left.pill {
  width: 207px;
}

.top-left ul.pill {
  display: block;
}

.top-left ul li.pill {
  float: left;
  transform: scale(1,1) rotate(0deg) translate(43px, 0);
}

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

<div class="top-left">
  <img src="http://placehold.it/100x100" alt="">
  <ul>
    <li value='1'><i class="icon-twitter-sign"></i></li>
    <li value='2'><i class="icon-twitter-sign"></i></li>
    <li value='3'><i class="icon-instagram"></i></li>
  </ul>
</div>

li出现在正确的位置，但没有动画发生，至少可见。怎么了

最佳答案

您只需要在.top-left中添加类'pill'：

$('.top-left').hover(function () {
  $(this).toggleClass("pill");
}

然后，您可以对所有lis使用具有不同动画延迟的此动画。

@keyframes myAnim {
    0% {transform: rotate(90deg) scale(0);}
    100% {transform: rotate(0deg) scale(1);}
}

.top-left.pill ul li:first-child {
     animation: myAnim .25s;
}
.top-left.pill ul li:nth-child(2) {
     animation: myAnim .25s .8s;
}
.top-left.pill ul li:last-child {
     animation: myAnim .25s 1.6s;
}

和其余的CSS：

.top-left ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 35px;
    /* padding-top: 10px;
    padding-bottom: 10px; */
    margin-left: 0px;
    display: none;
     transform: translate(20px, -46px);
}

.top-left img {
    margin: auto;
    width: 40px;
    display: table;
    margin: 0 auto 10px;
    margin-top: 6px;
    /* What transition ? */
    transition-timing-function: cubic-bezier(0, 1.4, 1, 1);
    transition-duration: 250ms;
}

.top-left.pill img {
    display: block;
    margin-left: 15px;
    transform: rotate(90deg);
}

.top-left ul li {
    cursor: pointer;
    padding-right: 10px;
    float: left;
}

.top-left.pill li:hover {
    color: white;
}
.top-left {
    width: 55px;
    height: 55px;
    border-radius: 55px;
    transition: width ease 0.3s;
    margin-top: 15px;
    background: #4d4d4d;
    border: 4px solid #333333;
}

.top-left.pill {
    width: 207px;
}

.top-left.pill ul {
    display: block;
}