【问题标题】:AngularJS - Animate ng-view transitionsAngularJS - 动画 ng-view 过渡
【发布时间】:2012-10-16 12:36:32
【问题描述】:

我有 2 个 html 页面,welcome.htmllogin.html 作为一部分,它们都通过 ngview 属性和路由器提供商“插入”到 index.html 中,具体取决于 URL我的 AngularJS 应用程序。

可以在 Wire up a Backend 下的 the AngularJS home page 上找到这方面的一个示例。

我的问题:有没有办法为welcome.htmllogin.html 之间的过渡设置动画?

【问题讨论】:

标签: javascript angularjs animation url-routing


【解决方案1】:

Angularjs 1.1.4 has now introduced the ng-animate directive to help animating different elements, in particular ng-view.

You can also watch the video about this new featue

更新 从 angularjs 1.2 开始,动画的工作方式发生了巨大变化,现在大部分都由 CSS 控制,无需设置 javascript 回调等。您可以查看updated tutorial on Year Of Moo . @dfsq 在 cmets 中指出了 nice set of examples

【讨论】:

  • 目前我找不到要下载的 1.1.4。我猜他们错过了 4 月 3 日的发布日期?
  • here,我猜他们忘了更新他们的网站,但是如果你去顶部菜单栏中的下载链接,你可以找到它。
  • 这里有一个很好的教程:yearofmoo.com/2013/04/animation-in-angularjs.html
  • 1.2 更改使这种方式更容易有 yearofmoo 更新的帖子,您需要查看yearofmoo.com/2013/08/…
  • 我还创建了ngView 动画的演示,check 可能会感兴趣。
【解决方案2】:

检查此代码:

Javascript

app.config( ["$routeProvider"], function($routeProvider){
    $routeProvider.when("/part1", {"templateUrl" : "part1"});
    $routeProvider.when("/part2", {"templateUrl" : "part2"});
    $routeProvider.otherwise({"redirectTo":"/part1"});
  }]
);

function HomeFragmentController($scope) {
    $scope.$on("$routeChangeSuccess", function (scope, next, current) {
        $scope.transitionState = "active"
    });
}

CSS

.fragmentWrapper {
    overflow: hidden;
}

.fragment {
    position: relative;
    -moz-transition-property: left;
    -o-transition-property: left;
    -webkit-transition-property: left;
    transition-property: left;
    -moz-transition-duration: 0.1s;
    -o-transition-duration: 0.1s;
    -webkit-transition-duration: 0.1s;
    transition-duration: 0.1s
}

.fragment:not(.active) {
    left: 540px;
}

.fragment.active {
    left: 0px;
}

主页 HTML

<div class="fragmentWrapper" data-ng-view data-ng-controller="HomeFragmentController">
</div>

部分 HTML 示例

<div id="part1" class="fragment {{transitionState}}">
</div>

【讨论】:

  • 这很好。只有一个问题:前一个视图在这个视图出现之前就消失了,所以它并没有真正过渡到前一个视图。在artcopycode.com 上,他们似乎不使用视图进行路由,但对从一开始就加载的每个片段都有指令。
  • @Mortimer artcopycode.com 做了一些与主题完全不同的事情,更容易执行。
  • 这是我的观点,他们做了主题中要求的事情:在单个页面应用程序中插入不同的片段,并动画片段的变化。但是,他们没有在视图之间使用 ng-view 和动画(这并不容易,因为在新视图进入之前旧视图已从 DOM 中删除),而是在其路由中使用指令(以保留控制器和模板)。
【解决方案3】:

我不确定直接使用 AngularJS 的方法,但您可以将欢迎和登录的显示设置为无,并在加载后使用指令为不透明度设置动画。

我会这样做。 2 用于淡入内容和在单击链接时淡出内容的指令。淡出指令可以简单地为具有唯一 ID 的元素设置动画或调用广播淡出的服务

模板:

<div class="tmplWrapper" onLoadFadeIn>
    <a href="somewhere/else" fadeOut>
</div>

指令:

angular
  .directive('onLoadFadeIn', ['Fading', function('Fading') {
    return function(scope, element, attrs) {
      $(element).animate(...);
      scope.$on('fading', function() {
    $(element).animate(...);
      });
    }
  }])
  .directive('fadeOut', function() {
    return function(scope, element, attrs) {
      element.bind('fadeOut', function(e) {
    Fading.fadeOut(e.target);
  });
    }
  });

服务:

angular.factory('Fading', function() {
  var news;
  news.setActiveUnit = function() {
    $rootScope.$broadcast('fadeOut');
  };
  return news;
})

我只是快速整理了这段代码,所以可能会有一些错误:)

【讨论】:

  • 您能否针对使用ng-view 和html 页面之间的转换来调整您的答案?谢谢!
  • @Greg 我不知道您将其定制为 ng-view 是什么意思。我认为 ng-view 不能转换。我不确定,但您可以增强 ng-view 指令或创建自己的辅助指令,如上所示。如果您现在加载欢迎,onLoadFadeIn 指令可以淡入您的 html,并且在单击链接后它将淡出。你还需要什么?
  • 是的,我想我希望 ng-view 指令将其直接合并到其中。感谢您的宝贵时间。
  • 我认为在这种情况下,我会创建一个新的 ng-view 并使用淡入淡出功能对其进行增强:)
【解决方案4】:

尝试查看他的帖子。它展示了如何使用 AngularJS 的 ngRoute 和 ngAnimate 实现网页之间的转换:How to Make iPhone-Style Web Page Transitions Using AngularJS & CSS

【讨论】:

    【解决方案5】:

    1.安装angular-animate

    2.将动画效果添加到类ng-enter页面进入动画和类ng-leave页面退出动画

    供参考:此页面有一个关于角度视图转换的免费资源https://e21code.herokuapp.com/angularjs-page-transition/

    【讨论】:

      猜你喜欢
      • 2015-06-03
      • 1970-01-01
      • 2017-11-09
      • 1970-01-01
      • 2014-12-02
      • 1970-01-01
      • 1970-01-01
      • 2014-12-16
      • 1970-01-01
      相关资源
      最近更新 更多