Angular中jQuery SlideIn动画到CSS动画的转换

Question

昨天我尝试在CSS动画中创建三个重叠的div的滑动效果，但是失败了。尽管angular提供了额外的类，但我无法完成平滑的过渡。

我想要实现的目标可以在这里看到(使用jQuery解决)：http://codepen.io/anon/pen/mVpyvB

​

​

我对css动画的问题是，要么底层的div很快就会被移除(从div1过渡到div2)，要么当底层的div最终应该被隐藏时，会有一个小的闪烁效果。

那么，从这些jQuery语句转移到CSS Animation的正确方法是什么呢？

$('#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>

​