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>