1

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

我的应用程序的一个部分上的渐变效果很好，但是在面板中的幻灯片运行时遇到了一些麻烦。

如果我选择“正确：0;” 离开 targetDiv，然后它很好地滑入，但是当动画完成后，它跳到屏幕的左侧（正如预期的那样，因为类在完成时被删除）。

但如果我保持'正确：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>
4

3 回答 3

2

我发现 ng-animate 指令不适用于没有默认值的 CSS 属性 - 它适用于不透明度（默认不透明度为 100%），但不适用于绝对定位正确： 0; 因为 right 在默认状态下不为 0。

使用 ng-animate 的 JS 和 CSS3 部分（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-07T14:02:20.563 回答
0

你可能想看看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

于 2013-05-14T00:04:23.290 回答
0

在我看来 ui.bootstrap 会帮助你。这是基本示例http://surecode.me/aknoblog/

于 2015-01-04T08:37:59.373 回答