帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:ION  modal  Ionic  animate  
When animate css and ionic modal meet

  • 源代码名称:ionic-animated-modal
  • 源代码网址:http://www.github.com/kevincobain2000/ionic-animated-modal
  • ionic-animated-modal源代码文档
  • ionic-animated-modal源代码下载
  • Git URL:
    git://www.github.com/kevincobain2000/ionic-animated-modal.git
  • Git Clone代码到本地:
    git clone http://www.github.com/kevincobain2000/ionic-animated-modal
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/kevincobain2000/ionic-animated-modal
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • 我推微博

    动画与 @Ionicframework的模式非常有效。 在 10分钟内钩住了很多。 那么酷的https://t.co/sCHtPOSAckpic.twitter.com/wvZV5bkJtr

    - ( @kevincobain2000 ) 2015年08月15日 <脚本异步 src="//platform.twitter.com/widgets.js" charset="UTF-8"> </脚本>

    https://twitter.com/kevincobain2000/status/632367134643892224

    个人喜爱的bounceIn

    我在我的应用程序中使用这个。 http://friendsapp.parseapp.com/

    演示( codepen )

    alt tag

    http://codepen.io/kevincobain2000/pen/EjJzjx

    如何

    添加动画 css

    https://daneden.github.io/animate.css/

    <link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" rel="stylesheet">

    复制 Style.css

    <link href="https://rawgit.com/kevincobain2000/ionic-animated-modal/master/www/css/style.css" rel="stylesheet">

    样式表在这里= https://github.com/kevincobain2000/ionic-animated-modal/tree/master/www/css

    使用它

    HTML
    <button type="" class="button" ng-click="showModal('bounceIn')">showModal bounceIn</button>
    你的控制器
     $scope.showModal = function(animation) {
     console.log(animation);
     $ionicModal.fromTemplateUrl('templates/modal.html', {
     scope: $scope,
     animation: 'animated ' + animation,
     hideDelay:920
     }).then(function(modal) {
     $scope.modal = modal;
     $scope.modal.show();
     $scope.hideModal = function(){
     $scope.modal.hide();
    //Note that $scope.$on('destroy') isn't called in new ionic builds where cache is used
    //It is important to remove the modal to avoid memory leaks
     $scope.modal.remove();
     }
     });
     };
    下拉列表动画
    bounceIn
    bounceInDown
    bounceInLeft
    bounceInRight
    bounceInUp
    fadeIn
    fadeInDown
    fadeInDownBig
    fadeInLeft
    fadeInLeftBig
    fadeInRight
    fadeInRightBig
    fadeInUp
    fadeInUpBig
    flipInX
    flipInY
    lightSpeedIn
    rotateIn
    rotateInDownLeft
    rotateInDownRight
    rotateInUpLeft
    rotateInUpRight
    slideInUp
    slideInDown
    slideInLeft
    slideInRight
    zoomIn
    zoomInDown
    zoomInLeft
    zoomInRight
    zoomInUp
    rollIn


    文章标签:animate  ION  modal  Ionic  

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