个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
24
4
长话短说
使用 ES5 ( ES5 Example ) 时，开始时 View 淡入
使用 Typescript 导入时 View 不会淡入 (Typescript and ES6 Import Example)
我目前正在试验 Typescript、ES6 模块以及如何集成所有这些技术。在大多数情况下，一切正常。但是，我想用 ngAnimate 为 ui-view 设置动画，问题就来了。不知何故，如果我使用 ES6 模块及其 import 语句，似乎我的依赖项是延迟加载的，因此 ngAnimate 将不会在初始页面加载期间工作。页面加载后，动画效果很好，例如如果用户单击链接，则动画进出 View 。我希望看到的是 ui-view 在开始时淡入。
我设置了两个 Plunker 来演示普通旧 ES5 应用程序和 Typescript 应用程序的行为，后者使用 SystemJS 和 import 语句加载其依赖项。
Here是 ES5 的例子。如果你运行这个 Plunker，你会注意到 View 在开始时是如何淡入的。我所做的只是通过 index.html 中的脚本标记包含文件。动画是通过纯 CSS 完成的:
ui-view.ng-enter {
animation: fadeIn .5s ease both;
animation-delay: .3s;
}
ui-view.ng-leave {
animation: fadeOut .5s ease both;
}
Here是 typescript 的例子。您会希望看到不同之处，即 View 不会淡入，即使它使用相同的动画机制。这里唯一的区别是我使用的是 Typescript(应该不是问题所在)和通过 import 导入的 ES6 模块。不知何故，如果我正在使用 import ngAnimate 似乎没有完全加载，或者在页面加载时可能根本没有加载。也许它是懒加载的？
我真的很想让这个堆栈正常工作，因为它更加有趣和现代。有什么想法吗？
最佳答案
经过一些调查和一位 Angular 团队成员的帮助，我发现 ngAnimate 默认禁用前两个摘要的所有加载动画。这意味着如果它检测到正在下载任何远程 Assets ，那么它会一直等待直到它们准备就绪。当您使用 Typescript/ES6 模块时，情况就是这样。您可以解决这种情况并保证所有动画在 Bootstrap 上运行，即使正在下载远程 Assets ，方法是创建一个指令以使用 $animate.enabled(true); 启用动画。您可以将指令放在 body 或 html 标记上。在上面的 Plunker 中，我已将指令添加到 body 标记中。这就是您所需要的:
<body allow-animations-on-load>
<ui-view></ui-view>
</body>
app.directive('allowAnimationsOnLoad', ['$animate', function($animate) {
$animate.enabled(true);
}]);
我也更新了对应的Plunker .如您所见，动画现在在 Bootstrap 中淡入。
关于angularjs - ngAnimate with Angular 1.4 + TypeScript 在页面加载期间不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34318564/
24
4
0
我有一个问题，但由于 this question 部分正在解决，但我想知道如何计算给定间隔之间的天数。 这是一个计算员工休假天数的查询。所以给定(或不给定)一个日期范围，我想计算给定间隔之间有多少假期
变量dateSubtract结果是 16，但我想找到这 2 天之间的总天数，应该是 165。没有 JODA TIME 我该如何做到这一点？ String date = "06/17/2014"; Da
我想选择创建日期介于给定月份的第一天和最后一天之间的记录。我通过以下方式计算开始日期和结束日期的月份: 日期“月份”只是时间范围内的随机日期 Calendar cal = Calendar.getIn
我有一个对你们大多数人来说可能微不足道的问题。我尝试了很多，没有找到解决方案，所以如果有人能给我提示，我会很高兴。起点是每周 xts -时间序列。 月周值(value)目标 2011 年 12 月 W
我有一个 Facebook 应用程序，它将用户生日作为 varchar 存储在 mysql 数据库中。我正在尝试获取所有用户的生日 1周后推出，如果是在本周如果生日是上周。 在我的 php 中，我获取
我正在使用以下代码来获取年、月、日中的两个日期之间的差异 tenAppDTO.getTAP_PROPOSED_START_DATE()=2009-11-01 tenAppDTO.getTAP_PRO
我想检查当前时间(在 C++ 中)是否在一个时间范围内。 我想从元组 ("12:00", "17:30") 构造时间范围，即 (string, string) 并检查时间 now() 是否介于两者之间
gitlab 有一个功能，如果我在提交消息中放入票号，那么提交将与 gitlab.com 上的票相关联。 这在进行代码审查时非常方便。不幸的是，开发人员有时会忘记这样做。 我想指定 git hooks
我正在尝试制作使用SQLite数据库的简单注册/登录应用程序，到目前为止我得到了这段代码。这是我的“注册” Activity ，我猜它应该在按下注册按钮后将用户名和 pin(密码)实现到数据库，遗憾的
我正在尝试打开、关闭和写入文件。每当我尝试打开一个文件时，如果我提供的路径中不存在该文件，程序就会告诉我。如果存在，程序将读取其中的内容并显示它。如果用户不想查找文件，可以选择创建文件并用数据填充它。
我想要我的至slideToggle每当发生 react 性变化时，但到目前为止我还无法使其发生。我尝试在 rendered 中使用 JQuery和created模板的事件，但它没有触发。 触发此操作的
我们的 MySQL 遇到了神秘的网络问题。简单的更新查询(使用索引更新单行)通常会立即运行，然后有时(假设 1000 次中有 1 次)因超时而失败。与简单的插入查询相同。数据库没有过载。我们怀疑网络问
我正在使用 actionbarsherlock 的 ActionBar，第一次以横向或水平方向运行应用程序时，选项卡以 Tabs Mode 显示。将方向更改为纵向后，导航模式仍在 Tabs 中。第二次
每天晚上(太平洋标准时间晚上 8 点)我都会对生产数据库(innoDB 引擎)进行全局备份。 这是 mysqldump 命令: mysqldump -u$MYSQLUSER -p$MYSQLPWD -
当我的应用程序第一次启动时，它应该显示用户协议(protocol)，这是一个 59kb 的 txt 文件。由于读取文件并将其附加到 TextView 需要一些时间，因此我决定在异步任务中执行此操作并在
如何只允许一个“.”在按键期间的javascript中？ 我这里有一个代码: function allowOneDot(txt) { if ((txt.value.split(".")
我已经创建了像主页和用户这样的标题图标。在桌面 View 中，如果我单击用户图像，它会显示相应的重定向页面。如果我在选项卡或移动 View 中将其最小化, 它什么都不显示。此问题仅发生在用户图像上，而
下面的代码在 Release模式下工作，并且仅在 Debug模式下在 g_ItemList.push_back() 引发错误，我浏览了一些 SO 帖子和论坛。有人提到 "You can't itera
我遇到了一个我似乎无法解决的 mmap 问题。下面是设置:我使用 malloc 将一个巨大的多维数组分配到内存中，用我的值填充它，然后我想将它保存在一个文件中。该数组包含 3200000000 个字节
尝试加载共享库: handle = dlopen( "libaaa.so.2.5", RTLD_NOW ); if ( !handle ) { printf("Failed t
我是一名优秀的程序员,十分优秀！