javascript - ionic animation失效-PHP中文网问答

用angular ui router写的一个小效果。里面的animation没有效果。我不知道是我用的版本的原因还是其他原因。
html页面如下




    
    Title

tab页面内容如下

路由效果是实现了。但是没有animation动画。
跳的四个页面内容均为

11111111111

这是boundle里面的版本内容

/*!
 * ionic.bundle.js is a concatenation of:
 * ionic.js, angular.js, angular-animate.js,
 * angular-sanitize.js, angular-ui-router.js,
 * and ionic-angular.js
 */

/*!
 * Copyright 2015 Drifty Co.
 * http://drifty.com/
 *
 * Ionic, v1.3.0
 * A powerful HTML5 mobile app framework.
 * http://ionicframework.com/
 *
 * By @maxlynch, @benjsperry, @adamdbradley <3
 *
 * Licensed under the MIT license. Please see LICENSE for more information.
 *
 */

ionic css版本如下

/*!
 * Copyright 2015 Drifty Co.
 * http://drifty.com/
 *
 * Ionic, v1.3.0
 * A powerful HTML5 mobile app framework.
 * http://ionicframework.com/
 *
 * By @maxlynch, @benjsperry, @adamdbradley <3
 *
 * Licensed under the MIT license. Please see LICENSE for more information.
 *
 */
/*!
  Ionicons, v2.0.1
  Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
  https://twitter.com/benjsperry  https://twitter.com/ionicframework
  MIT License: https://github.com/driftyco/ionicons

  Android-style icons originally built by Google’s
  Material Design Icons: https://github.com/google/material-design-icons
  used under CC BY http://creativecommons.org/licenses/by/4.0/
  Modified icons to fit ionicon’s grid from original.
*/

--不知道哪里出的问题。动画出不来。切换页面没有动画

$stateProvider .state("tab",{url:"/tab",templateUrl:"view/tab.html", controller : "one"}) .state("tab.m",{ url:"/m", views:{ "tab-m":{ templateUrl:"view/childPage1.html" } } }).state("tab.m.a",{ url:"/m/a", views:{ "tab-m":{ templateUrl:"view/a.html" } } });

全部回复(1)

伊谢尔伦2017-04-11 11:01:14 1楼

tab标签是没有动画的。并且，ion-nav-view没有animation属性。

因为每个tab是对应一个ion-nav-view的，所以多个ion-nav-view切换时没有动画效果的。就像你在微信里，切换“通讯录”和“发现”按钮时，是一样的。

如果你对单个ion-nav-view中设置子页面，在进入这个子页面时是有动画效果的，再比如微信：在“发现”页面，点击“朋友圈”进入是有动画效果的。

加个实例代码：

路由设置：

然后在 childPage1.html 里加个按钮，设置它的跳转路由地址是：ui-sref='tab.m.a'。
在点击按钮的时候，你就能看到动画了。

希望你能帮到你。