在jquery淡出后进行CSS转换

这上面有红色和绿色的盒子。 如果单击“click me”（单击我）按钮，那么jQuery中的红色框将通过淡出方法淡出，绿色框将跳转到新位置

我希望绿盒子顺利地移动到新位置。我怎样才能做到这一点？我试图为他们提供CSS转换选项

-webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;

但是jQuery淡出方法不再起作用了

---

以下是jsfiddle代码：

HTML

CSS

---

您可以尝试使用jQuery，并将淡出持续时间设置为优于.b类的延迟：

    $("#clickme").click(function(){
        $('.a').fadeOut();
        $('.b').delay(1000).fadeIn();
    });

要实现这一点，需要在调用下一个转换（即fadeIn（）the.b类）之前完成fadeOut（）

---

看到它在这里工作了吗：

JQuery-只需切换类即可

$(document).ready(function(){
  $("#clickme").click(function(){
  $('div').toggleClass('a');
  });
});

CSS-在“有”类和“没有”类之间进行检查

---

您可以在淡出后添加带有红色元素过渡的类

  $("#clickme").click(function(){
    $('.a').fadeOut(1000, function() {
        $('.a').addClass('hide');
    });
  });

并将转换设置为此元素：

li div.a.hide{
      -webkit-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -o-transition: all 1s ease-in-out;
      transition: all 1s ease-in-out;

      opacity: 0;
      display: block !important;
      margin-top: 0;
      margin-bottom: 0;
      height: 0;

    }

您仍然会遇到浮动问题。 您应该将此列表制动为例如4个浮动的li元素，并在其中插入方框。那么整个动画应该是好的

这是小提琴：

将布局更改为4个li元素

    <ul>
      <li>
        <div class='a'></div>
        <div class='a'></div>
        <div class='b'></div>
      </li>
      <li>
        <div class='a'></div>
        <div class='b'></div>
        <div class='a'></div>
      </li>
      <li>
        <div class='b'></div>
        <div class='a'></div>
        <div class='a'></div>
      </li>
      <li>
        <div class='a'></div>
        <div class='a'></div>
        <div class='a'></div>
      </li>
    </ul>

---

并为这一变化进行调整：

将转换添加到LIs。@Jai你是说这样吗？因为这不起作用，对吧？你实际上并没有“改变”绿框的位置坐标，所以过渡没有效果。如果它们是用

顶部

、

左侧

、

右侧

或

底部

值定位的，然后你可以改变它们并看到过渡。如果你完全设定了这种效果，我会看到类似于

同位素砌石

-它的工作原理是设置项目的绝对位置，然后在DOM改变时改变它们的位置-这比落入间隙更容易设置动画，因为实际上没有什么可以改变的谢谢你。这是一个很好的动画，但我想创建一个过渡动画。

li {
  list-style-type: none;
  float: left;
}

li div {
  margin: 20px 0;
  height: 100px;
  width: 0px;
  opacity: 0;
  background-color: red;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

li div.a {
  opacity: 1.0;
  margin: 20px;
  width: 100px;
}

li div.b {
  opacity: 1.0;
  margin: 20px;
  width: 100px;
  background-color: green;
}

#clickme {
  background-color: blue;
  text-align: center;
  color: #FFF;
  cursor: pointer;
}

  $("#clickme").click(function(){
    $('.a').fadeOut(1000, function() {
        $('.a').addClass('hide');
    });
  });

li div.a.hide{
      -webkit-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -o-transition: all 1s ease-in-out;
      transition: all 1s ease-in-out;

      opacity: 0;
      display: block !important;
      margin-top: 0;
      margin-bottom: 0;
      height: 0;

    }

    <ul>
      <li>
        <div class='a'></div>
        <div class='a'></div>
        <div class='b'></div>
      </li>
      <li>
        <div class='a'></div>
        <div class='b'></div>
        <div class='a'></div>
      </li>
      <li>
        <div class='b'></div>
        <div class='a'></div>
        <div class='a'></div>
      </li>
      <li>
        <div class='a'></div>
        <div class='a'></div>
        <div class='a'></div>
      </li>
    </ul>