【问题标题】:Animate ui.router transitions动画 ui.router 过渡
【发布时间】:2016-03-16 08:04:52
【问题描述】:

我正在尝试为 ui 路由器的过渡设置动画。

为此,我使用animate.cssangular-animate,但我遇到了问题:

当过渡发生时,退出视图在向左滑动之前下降(新视图将其向下推)。

less/css 的动画代码是:

.main_view {
  .transition(all 10s);

  &.ng-enter {
    .view-wrapper {
      .fadeInRight;
    }
  }

  &.ng-leave {
    .view-wrapper {
      .fadeOutLeft;
    }
  }
}

.view-wrapper {
  .transition(all 0.5s ease-out);
  .animated;
}

每个视图都用 view-wrapper 类包裹,如下所示:

<div class="view-wrapper">
   ... view content ...
</div>

我在 plunker 中做了两个状态的演示:http://plnkr.co/edit/pweVNMDYb7xTGmNtNE1E?p=preview

如何防止退出的视图下拉?

【问题讨论】:

    标签: css angularjs angular-ui-router ng-animate animate.css


    【解决方案1】:

    当我设置时

    .main_view{
      position: absolute;
      width: 100%;
    }
    

    它正在工作,但也许有更好的解决方案

    编辑 使用@ryeballar 评论,您可以添加:

    .ng-enter{
      position: absolute;
      width: 100%;
    }
    

    效果很好。

    【讨论】:

    • 最好把它放在.ng-enter 类中。
    • 感谢您的回答,但这对我来说并不真正有效,因为我的网站中有一个footer,然后视图会越过页脚,这并不是很好。我知道我可以破解它并让它像那样工作,但我宁愿有一个更好的解决方案......不过谢谢!
    • 好吧,我想我明白了:plnkr.co/edit/fz8ob3t0qGcVFZ4HwgDk?p=preview 我在 index.html 上创建了一个具有 position: relative 的父级,并将 position:absolute & top:0 放在 .ng-leave 上。你还好吗?
    • 看起来不错,但我仍然不确定...我将使用它作为最后的手段。
    猜你喜欢
    • 2016-02-26
    • 2016-11-01
    • 1970-01-01
    • 2018-04-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多