jQuery SlideIn動畫到角度的CSS動畫

Question

昨天我試圖在CSS動畫中創建三個重疊div的幻燈片效果，但失敗了。儘管angular提供了額外的類，但我無法完成平滑過渡。

我想達成什麼可以看這裏（解決使用jQuery）：http://codepen.io/anon/pen/mVpyvB

我用CSS動畫的問題，要麼下襯格將被刪除儘快（過渡從div1到div2），或者當底層div應該隱藏時，會產生小的閃爍效果。

那麼從這些jQuery語句轉換爲CSS動畫的正確方法是什麼？

$('#show2').click(function(){ 
    $('.second').animate({ 
    'margin-left': '0px' 
    }, 1000, function() { 
    // Animation complete. 
    $('.first').removeClass('visible'); 
    $('.second').addClass('visible'); 
    }); 
}); 

$('#hide2').click(function(){ 
    $('.first').addClass('visible'); 
    $('.second').removeClass('visible'); 
    $('.second').animate({'margin-left': '350px'}, 1000); 
}); 

Answer 1

因爲你還沒有包括你的CSS，我已經做了猜測，並建立了我自己的版本，看看是否下方可以幫助你以任何方式。 JS只是在那裏添加和刪除類，如果你願意，可以用jQuery替換，但這很簡單。

var c = document.getElementById('container'); 
 
var cd = Array.prototype.slice.call(c.querySelectorAll('div')); 
 

 
// Make each #d activate the next one (where available) 
 
cd.forEach(function(e, i){ 
 
    // Check each for a close anchor 
 
    var a = e.querySelector('a'); 
 
    if(a) a.addEventListener('click', function(event){ 
 
     event.preventDefault(); 
 
     event.stopImmediatePropagation(); 
 
     cd[i].className = ''; 
 
    }) 
 
    // Check if there is a next element to activate 
 
    if(cd[i + 1]) e.addEventListener('click', function(event){ 
 
     event.preventDefault(); 
 
     event.stopImmediatePropagation(); 
 
     cd[i + 1].className = 'active'; 
 
    }) 
 
}); 
 

 
// Make Container Click active #d1 
 
c.addEventListener('click', function(event){ 
 
    event.preventDefault(); 
 
    event.stopImmediatePropagation(); 
 
    cd[0].className = 'active'; 
 
})

body, html { 
 
    height: 100%; 
 
} 
 
#container { 
 
    width: 100%; 
 
    position: relative; 
 
    height: 100%; 
 
    background: gray; 
 
    overflow: hidden; 
 
} 
 
#container > div { 
 
    width: 80%; 
 
    height: 100%; 
 
    position: absolute; 
 
    left: 100%; 
 
    top: 0; 
 
    /* This would be all you need */ 
 
    -webkit-transition: left 400ms; 
 
    transition: left 400ms; 
 
} 
 
/* And this, of course. */ 
 
#container > div.active { 
 
    left: 20%; 
 
} 
 
#d1 { background: yellow; } 
 
#d2 { background: red; } 
 
#d3 { background: green; }

<div id="container"> 
 
    <div id='d1'>First <a href="#">Close</a></div> 
 
    <div id='d2'>Second <a href="#">Close</a></div> 
 
    <div id='d3'>Third <a href="#">Close</a></div> 
 
</div>