Question

我试图通过CSS修改一些元素样式，我希望某些转换，但如果我将它们移动到另一个父元素（在我的应用程序中必不可少），我就无法使它们工作。

这是一个最小的例子：

    var a = $('#a'), b = $('#b'), box = $('.box'), current = 0;
    setInterval(function() {
      if(++current % 2 == 0) {
        box.appendTo(b).addClass('in-b').removeClass('in-a');
      } else {
      	box.appendTo(a).addClass('in-a').removeClass('in-b');
      }
    }, 3000);

    #a, #b {
      position: absolute;
      left: 0;
      top: 0;
    }
    
    .box {
      background-color: #50A000;
      transition: width 0.5s, height 0.5s;
      position: absolute;
      top: 0;
      left: 0;
      width: 50px;
      height: 50px;
    }
    
    .box.box.in-a {
      height: 50px;
      width: 50px;
    }
    
    .box.box.in-b {
      height: 80px;
      width: 80px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div id="a">
      <div class="box in-a">
      Hello world!
      </div>
    </div>
    <div id="b"></div>

我该如何解决这个问题？我需要将元素移动到不同的父级，更改某些样式并仍然确保转换正常工作。

Answer 1

您正在快速切换类，DOM需要更新到新结构才能进行新的转换。

您可以使用setTimeout拨打非常短的延迟（如10）来完成此操作。由于您只使用两个类并在每个时间间隔之间切换它们，因此您可以使用toggleClass("in-a in-b")而不是单独执行add / removeClass调用。

setTimeout(()=>box.toggleClass("in-a in-b"),10);

演示

var a = $('#a'),
  b = $('#b'),
  box = $('.box'),
  current = 0;
setInterval(function() {
  if (++current % 2 == 0) {
    box.appendTo(b);
  } else {
    box.appendTo(a);
  }
  setTimeout(() => box.toggleClass("in-a in-b"), 10);
}, 3000);

#a,
#b {
  position: absolute;
  left: 0;
  top: 0;
}
.box {
  background-color: #50A000;
  transition: width 0.5s, height 0.5s;
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
}
.box.box.in-a {
  height: 50px;
  width: 50px;
}
.box.box.in-b {
  height: 80px;
  width: 80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="a">
  <div class="box in-a">
    Hello world!
  </div>
</div>
<div id="b"></div>

更改父元素时，CSS转换不起作用

1 个答案: