帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:Directive  路由器  ui router  route  动画  DIR  
An animation directive to use with ngAnimate 1.2+ and ui-router

  • 源代码名称:angular-ui-router-anim-in-out
  • 源代码网址:http://www.github.com/homerjam/angular-ui-router-anim-in-out
  • angular-ui-router-anim-in-out源代码文档
  • angular-ui-router-anim-in-out源代码下载
  • Git URL:
    git://www.github.com/homerjam/angular-ui-router-anim-in-out.git
  • Git Clone代码到本地:
    git clone http://www.github.com/homerjam/angular-ui-router-anim-in-out
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/homerjam/angular-ui-router-anim-in-out
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
  • angular-ui-router-anim-in-out

    用于 ngAnimate 1.2 + 和用户界面路由器的动画指令

    安装

    
    $ bower install angular-ui-router-anim-in-out --save
    
    
    
    

    或者

    
    $ npm i -D angular-ui-router-anim-in-out
    
    
    
    

    快速启动

    • 在页面上包含 anim-in-out.js & anim-in-out.css
    • 将模块作为应用程序的依赖项
    angular.module('ExampleApp', ['ngAnimate', 'ui.router', 'anim-in-out'])
    <divui-view="mainView"class="anim-in-out"></div>
    • 最后在 anim-in-out.css 中添加类,到你希望在状态更改时转换的任何元素。 anim-fadeanim-slide-left
    <divui-view="mainView"class="anim-in-out anim-fade"data-anim-speed="1000">
     <!-- Dynamically loaded view content --> <divclass="my-component anim-slide-left"></div>
    </div>

    注意:你必须使用 ui-view 元素的绝对定位

    用法

    动画是由javascript触发的,以便提供事件。

    // In your main controller$rootScope.$on('animStart', function($event, element, speed) {
     // do something});$rootScope.$on('animEnd', function($event, element, speed) {
     // do something});

    默认转换速度是 1000ms 这可以使用 ui-view 上的data-anim-speed 属性进行更改。 这是由 data-anim-in-speeddata-anim-out-speed 属性进一步定制的。

    默认情况下,进入状态的动画将在延迟( data-anim-speed/data-anim-in-speed ) 之后触发,但这可以通过将属性 data-anim-sync 设置为 true 来改变。

    <divui-view="mainView"class="anim-in-out"data-anim-sync="true"></div>

    常见问题解答

    为什么我的视图的位置都混乱了? 或者为什么在转换过程中两个视图都可见?

    这里指令可以作为 ui-routerngAnimate的补充。 这两个库处理转换的方式是将传入和传出视图添加到dom中,然后添加/删除所需的类。 视图元素在dom中并行存在时,你需要使用绝对定位来解决一个视图的问题,从而影响其他视图的位置。

    如果你在编译应用程序后发现行为差异,如初始转换未能在这里注释中触发建议/plunkr可能会帮助你,或者下面的内容:。

    angular
    . module('app', ['ngAnimate'])
    . controller('MainCtrl', function ($scope, $timeout, $rootElement) {
     // Monkey-patch for ngAnimate to force animations to be played right// on the first digest. A"run-time revert" of this commit:// https://github.com/angular/angular.js/commit/eed2333298412fbad04eda97ded3487c845b9eb9// Note: dirty hack! Do not use in production code unless you accept// all consequences!$rootElement.data("$$ngAnimateState").running=false;
     });

    编译 Sass

    
    # Install gulp and dependencies
    
    
    $ npm install
    
    
    
    # Compile sass
    
    
    $ gulp sass
    
    
    
    

    演示

    http://homerjam.github.io/angular-ui-router-anim-in-out/

    你可能还喜欢

    使用 /的类似指令,以实现转换;还使用一个优先级附加到每个状态的细粒度配置。



    文章标签:DIR  动画  route  Directive  路由器  ui router  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语