鍍金池/ 問答/網(wǎng)絡(luò)安全/ transition同時移動兩個div頁面很卡？

transition同時移動兩個div頁面很卡？

前端新手，做頁面切換的時候，發(fā)現(xiàn)同時移動兩個div很卡，而單獨觸發(fā)一個div的移動則很流暢。代碼如下：

.div1 {
    position:absolute;
    width:100%;
    height:100%;
    left:0;
}

.div2 {
    position:absolute;
    width:100%;
    height:100%;
    left:100%;
}

.page-switch {
    transition: left 1s;
    -moz-transition: left 1s;
    /* Firefox 4 */
    -webkit-transition: left 1s;
    /* Safari 和 Chrome */
    -o-transition: left 1s;
    /* Opera */
}
<div class="div1 page-switch" id="list_page">
</div>
<div class="div2 page-switch" id="detail_page">
</div>
$('#list_page').on('click', function() {
    $('#list_page').css('left', '-100%');
    $('#detail_page').css('left', '0');
});

請幫助看下，謝謝！

回答
編輯回答
柚稚

改left屬性性能不行，用translateX。
例子：

css:
html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
 }
 #div1 {
  left: 0;
  background-color: red;
 }

 #div2 {

  left: 100%;
  background-color: blue
 }

 .page-switch {
  position: absolute;
  width: 100%;
  height: 100%;
  transition:transform 1s ;
 }
html:
<body ontouchstart="">
 <div id="div1" class='page-switch'></div>
 <div id="div2" class='page-switch'></div>
</body>
script:

 document.addEventListener('click', transitDiv, false);
 function transitDiv() {
  document.getElementById("div1").style.transform = 'translateX(-100%)';
  document.getElementById("div2").style.transform = 'translateX(-100%)';
 }
2017年7月1日 13:54