html gif重复播放,javascript – ngIf with ngAnimate – 动画期间重复的HTML内容
我尝试做简单的角度动画.但是我遇到了一个问题,当我快速点击按钮时(在动画完成之前),我点击时会多次创建内容容器…
如何防止这种情况?我希望在单击后停止动画,然后在不在新对象上的同一对象上开始动画?
HTML
1
2
JS
var app = angular.module('test', ['ngAnimate']);
app.controller('TestController', function ($scope) {
this.tt = 1;
});
CSS
.animate-if.ng-enter, .animate-if.ng-leave {
-webkit-transition: opacity 5.2s ease-in-out;
-moz-transition: opacity 5.2s ease-in-out;
-ms-transition: opacity 5.2s ease-in-out;
transition: opacity 5.2s ease-in-out;
}
.animate-if.ng-enter,
.animate-if.ng-leave.ng-leave-active {
z-index: 0;
opacity: 0;
}
.animate-if.ng-leave,
.animate-if.ng-enter.ng-enter-active {
z-index: 1;
opacity: 1;
}
编辑:
我确实更改了代码以使用ngRoutes和ngView而不是ngIf,但ngAnimate的行为是相同的.
我认为它在Angular中可能是一个错误,因为在控制台中我的错误未定义在第1348行的angular-animate.js中的函数中,该函数包含operation.cancel()并且是以下部分的一部分:
forEach(animationsToCancel, function(operation) {
operation.cancel();
});
当您点击左侧菜单“仪表板”和“用户”快速时,您可以看到完整的问题here.
编辑2:
我现在使用的解决方案:
this.fn_change_view = function (str_view, $event) {
if (!this.contentStopAnim) {
this.contentStopAnim = true;
this.active_view = str_view;
$timeout(function () {
template.contentStopAnim = false;
}, 360);
} else {
$event.preventDefault();
}
};
我在动画完成之前阻止更改位置href,但这不是我很高兴的解决方案……
最佳答案 您可以使用ng-show和关键帧进行动画处理.这是一个
plunker.
分配css事件.
.ng-hide-add {
animation:0.1s keyFrameLeave ease;
}
.ng-hide-remove {
animation:0.5s keyFrameEnter ease;
}
注册关键帧
@keyframes keyFrameEnter {
0% {
transform: translate(0,100px);
opacity: 0;
}
100% {
transform: translate(0,0);
opacity: 1;
}
}
@keyframes keyFrameLeave {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
你的HTML看起来像这样:
click to animate
你的js
$scope.front = false;
html gif重复播放,javascript – ngIf with ngAnimate – 动画期间重复的HTML内容相关推荐
- html如何设置滚动动画,JavaScript 实现页面滚动动画
在做前端 UI 效果时,让元素根据滚动位置实现动画效果是一个非常流行的设计,通常我们会使用第三方插件或库来实现.在本教程中,我将教大家使用纯 JavaScript 和 CSS 来实现. 先预览一下实现 ...
- 基于JavaScript的人物走路动画
基于JavaScript的人物走路动画 想要实现人物走路的动态图,可以连续更换图片,给人一种人物在走路的假象,但是接下来我们用另外一种方法来实现,将所有单张图片拼接成一个长图,可以让图片移动代替更换图 ...
- 【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYP ...
- html动画之制作烟花效果,JavaScript实现烟花绽放动画效果
先编写一个烟花绽放的动画效果. 放烟花时,一个烟花可分为两个阶段:(1)烟花上升到空中:(2)烟花炸开成碎片,炸开的碎片慢慢消散. 为此抽象出两个对象类:Firework和Particle.其中,Fi ...
- 从JavaScript数组中获取随机项[重复]
本文翻译自:Get random item from JavaScript array [duplicate] This question already has answers here : 这个问 ...
- JavaScript实现combine With Repetitions结合重复算法(附完整源码)
JavaScript实现combine With Repetitions结合重复算法(附完整源码) combineWithRepetitions.js完整源代码 combineWithRepetiti ...
- JavaScript实现combine Without Repetitions不重复地结合算法(附完整源码)
JavaScript实现combine Without Repetitions不重复地结合算法(附完整源码) combineWithoutRepetitions.js完整源代码 combineWith ...
- flash动画制作作品_flash施工动画制作应该展现哪些内容
伴随施工方案演示动画的不断应用,越来越多的人认识到其中的功效,施工动画通过电脑技术将建筑过程演示出来,能够对建筑工地和施工过程进行详细的了解,避免施工过程中的一些错误,提高施工的安全性和工程的质量.作 ...
- JavaScript学习(三十九)—对象中内容的操作
JavaScript学习(三十九)-对象中内容的操作 一.对象中内容的操作:增.删.改.查 (一).增:给对象添加属性或者方法 1)方式1:对象名称.属性名=属性值: 2)方式2:对象名称['属性名' ...
最新文章
- Mysql大表的优化
- Android开发人员资料大全(开发人员必看)
- pdm生成mysql sql语句_如何用Powerdesigner的PDM生成数据库
- 计算机视觉中的多视图几何_基于深度学习的视觉三维重建研究总结
- 小米为其他手机适配rom_让小米引以为傲的MIUI,为什么不再给其它手机适配了?...
- 20非常有用的Java程序片段(11-15)
- python入门——P40类和对象:一些相关的BIF
- 樊登高效休息法心得400字_从3个方面入手,让运营工作更高效!
- 曲面化原理创新设计_曲面丝印机会给我们带来什么样的美丽
- Eclipse自动排版快捷键失效(转)
- 计算机四级 信息安全工程师——计算机网络题库
- Office Scan(OSCE)10.0客户端手动卸载
- 什么样的联系人管理软件最有效?这里有管理联系人的3款实用软件
- 目标检测+双目测距——基于yolov5
- python系统函数详解
- win7系统定时删除数据的批处理命令_win7如何一键清理系统垃圾|win7批处理命令清理垃圾的方法...
- 阿里云服务器发送邮件报错Couldn’t connect to host, port: smtp.qq.com, 25
- 苹果手机怎么快速截屏_苹果iPhone XR手机的两种截屏方法
- vue组件中引入public文件,build打包后找不到资源报错404
- 地图开发技术报告(百度地图)
热门文章
- 兼容iBeacon和Eddystone的电子吊牌应用详解
- python虚拟仿真_国家级大学生创新创业训练计划平台
- ITSM | 对话龙智资深技术顾问,探讨ITSM实践如何从过去转向未来
- SuperAgent使用文档
- 单细胞论文记录(part11)--ClusterMap for multi-scale clustering analysis of spatial gene expression
- 程序员麦兜【编程笔记】-线程的概念及创建
- Webbench用法详解
- SpringCloud断路器——Hystrix
- 成都线上果蔬超市APP软件开发能够为用户提供什么?
- matlab 背景差分法,背景差分法MATLAB实现