用CSS動畫同時滑動兩個div

我的目標是在兩個div之間改變滑動動畫。以下是我迄今爲止：用CSS動畫同時滑動兩個div

var current = $('#blue'); 
 
var other = $('#red'); 
 

 
function slider($elem_in, $elem_out) { 
 
    $elem_in.show(); 
 
    // reset the animations 
 
    $elem_in.css('animation', ''); 
 
    $elem_out.css('animation', ''); 
 
    // remove the previous event handler 
 
    $elem_in.off('animationend'); 
 
    // make the elem_out slide out 
 
    $elem_out.css('animation', 'slideLeftOut 1s ease'); 
 
    $elem_out.on('animationend', function() { 
 
    $elem_in.css('animation', 'slideLeftIn 1s ease'); 
 
    $elem_out.hide(); 
 
    }); 
 
} 
 

 
$('#container').on('click', function() { 
 
    slider(other, current); 
 
    // invert the two variables 
 
    other = [current, current = other][0]; 
 
})

#container { 
 
    width: 100px; 
 
    height: 100px; 
 
    overflow: hidden; 
 
    border: 1px solid black; 
 
} 
 

 
#container div { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
#red { 
 
    background: red; 
 
} 
 

 
#blue { 
 
    background: blue; 
 
} 
 

 

 
/* slide to the left in */ 
 

 
@keyframes slideLeftIn { 
 
    0% { 
 
    transform: translateX(150%); 
 
    } 
 
    100% { 
 
    transform: translateX(0%); 
 
    } 
 
} 
 

 

 
/* slide to the left out */ 
 

 
@keyframes slideLeftOut { 
 
    0% { 
 
    transform: translateX(0%); 
 
    } 
 
    100% { 
 
    transform: translateX(-150%); 
 
    } 
 
}

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

 
<div id="container"> 
 
    <div id="blue"></div> 
 
    <div id="red"></div> 
 
</div>

有兩個問題，我試圖解決：

當我點擊和current是$('#red')，它在播放動畫之前變爲藍色。但是，當current爲$('blue')時，動畫效果良好。
divs之間滑動時可能沒有空格嗎？我曾嘗試過移動事件處理程序的外觀，但在這種情況下，動畫根本不起作用。

我已經看到了類似的問題，如this one，但答案使用絕對定位，我想利用CSS轉換，而不是實現我的目標。

來源

2017-04-15 TrakJohnson

1.似乎與元素放置在何處有關。也許在動畫將隱藏的元素放在可見的元素後面之後？ – yezzz

問題1與放置元素的位置有關。第二個元素滑動後，右側沒有任何東西滑向左側。只需要第一個動畫div並在最後添加它。

$elem_out.hide().remove().appendTo("#container");

而且，那麼你就不需要切換邏輯。只需引用調用slider（）中的2個元素即可。喜歡的東西：

$('#container').on('click', function() { 
    slider($(this).children().eq(1),$(this).children().eq(0)) 
})

https://jsfiddle.net/0xak4aes/

對於問題2，我不能幫你在這個時候。

來源

2017-04-15 11:59:40 yezzz

謝謝！那正是我正在尋找的。我會'+ 1'的幫助，但我不會接受，因爲我的問題沒有完全解決：/ – TrakJohnson

我認爲你是第二個問題是不可能的當前設置。如果你將第二個div放在開發工具中，你會看到它在第一個下面，而不是在它旁邊。在其他人隱藏之前，它不會變得可見。我認爲你需要將div浮動到左邊，將它們寬度設置爲100px，將容器寬度設置爲200px，然後在100px寬的周圍放置一個包裝。也許還有其他的風格改變。我建議發佈一個只有css標籤的新問題。 – yezzz

因爲我很好奇，我創建了一個包裝器和一個容器，其中有兩個元素在裏面左側浮動，併爲容器設置動畫而不是單獨的元素。

function slider(container) { 
    container.css('animation', 'slideLeft 1s ease') 
    .on('animationend', function() { 
     console.log("swap!"); 
     container.off('animationend') // remove handler 
     .css('animation', '') // reset css 
     .children().eq(0).remove().appendTo(container); // swap 
    }); 
} 

$('#container').on('click', function() { 
    slider($(this)); 
})

https://jsfiddle.net/ofc4w7dy/

檢查我的CSS +評論。隨意嘗試單獨動畫元素。

來源

2017-04-16 15:35:32 yezzz

用CSS動畫同時滑動兩個div

回答

相關問題