jQuery SlideIn动画到Angular中的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代替，但它相当简单。

＆＃13;

＆＃13;

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';
})

＆＃13;

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; }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;