jQuery SlideIn 动画到 Angular 中的 CSS 动画

Question

昨天我尝试在 CSS Animation 中创建三个重叠 div 的滑入效果但失败了。尽管 Angular 提供了额外的类，但我无法实现平滑过渡。

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

我的 css 动画问题是，要么底层 div 很快就会被删除(从 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>