Question

我正在使用v 1.1.4，因此我可以将ng-animate指令与ng-show一起使用。

我的应用程序的某个部分有一个很好的工作效果，但是在面板中滑动时遇到一些麻烦。

如果我采取'正确：0;'关闭targetDiv，然后它很好地滑动，但是当动画完成时，它会跳转到屏幕的左侧（正如预期的那样，完成后删除类）。

但如果我保持'正确：0;'在.targetDiv上然后动画永远不会运行，它只是显示div，而不是滑动它。

我把小提琴放在一起，但似乎无法使用CDN版本的1.1.4

非常感谢任何帮助！

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>

Answer 1

我已经知道ng-animate指令对于没有默认值的CSS属性效果不佳 - 它对于不透明度（默认不透明度为100％）非常有效，但绝对不是右边：0;在默认状态下，右边不是0。

同时使用JS＆amp; ng-animate（http://code.angularjs.org/1.1.4/docs/api/ng.directive:ngAnimate）的CSS3部分意味着我可以做一个脏的黑客来完成一个类的添加，然后在hide上删除：

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

这感觉很脏，如果有人能想出更好的答案，那就是王牌 - 但这适用于我现在正在建造的原型。

Answer 2

你可能想看一下Angular Bootstrap的Carousel指令，看看他们是如何完成滑动效果的（虽然不是通过ngAnimate完成的。）

或者，我写了一篇文章，介绍如何使用支持jQuery的ngAnimate定义修补Angular Bootstrap的Carousel实现，这可能对您有所帮助：

http://gsklee.im/post/50254705713/nganimate-your-angularjs-apps-with-css3-and-jquery#nganimate-custom-directives

Answer 3

对我来说ui.bootstrap会帮助你。以下是基本示例http://surecode.me/aknoblog/

Angular JS幻灯片动画

3 个答案: