Angular JS幻灯片动画

我使用v 1.1.4，因此我可以在ng-show中使用ng-animate指令。Angular JS幻灯片动画

我已经在我的应用程序的某个部分上使用了很好的淡入淡出效果，但在面板中表现得很滑。

如果我把'right：0'关闭targetDiv，然后它很好地滑动，但是当动画完成时，它跳转到屏幕的左侧（如预期的那样，因为类完全移除）。

但是如果我保留'right：0''在.targetDiv上，动画永远不会运行，它只是显示div，而不是滑动它。

我把一个小提琴，但似乎无法得到它的1.1.4

的CDN版本的任何帮助非常感谢合作！

CSS

.slideFromRight-show-setup { 
    -moz-transition:all 0.5s ease-in-out; 
    -webkit-transition:all 0.5s ease-in-out; 
    transition:all 0.5s ease-in-out; 
} 

.slideFromRight-show-setup { 
    right: -100%; 
} 

.slideFromRight-show-setup.slideFromRight-show-start { 
    right: 0; 
} 

.targetDiv { 
    position: absolute; 
    right: 0; 
    width: 50%; 
    height: 100%; 
    background-color: red; 
}

HTML

<div class="targetDiv" ng-show="detailPanel.visible" ng-animate="'slideFromRight'">Content</div>

来源

2013-05-01 Les

我已经计算出了NG-动画指令不会为没有CSS属性很好地工作默认 - 它适用于不透明度（默认不透明度为100％），但不适用于绝对定位的右：0;因为在默认状态下右边不是0。

同时使用JS & CSS3 NG-动画的部分（http://code.angularjs.org/1.1.4/docs/api/ng.directive:ngAnimate）意味着我可以做一个肮脏的黑客来得到补充的完整的一类，然后隐藏已移除：

myApp.animation('slideFromRight-show', function() { 
    return { 
    setup : function(element) { 
    }, 
    start : function(element, done, memo) { 
     var timer = setTimeout(function(){ 
     element.addClass("opened"); 
     done(); 
     }, 500); 
    } 
    }; 
}); 

myApp.animation('slideFromRight-hide', function() { 
    return { 
    setup : function(element) { 
     element.removeClass("opened"); 
    }, 
    start : function(element, done, memo) { 
     var timer = setTimeout(function(){ 
     done(); 
     }, 500); 
    } 
    }; 
});

这种感觉脏，如果有人能够提出更好的答案，这将是王牌 - 但这对我现在正在构建的原型很有用。

来源

2013-05-07 14:02:20 Les