微软官方MSDN原版Win10系统下载

现在位置: 首页  > 系统教程  > 系统帮助

css3动画如何停止

时间:2024-11-23 09:20:49   

大家好,今天Win10系统之家小编给大家分享「css3动画如何停止」的知识,如果能碰巧解决你现在面临的问题,记得收藏本站或分享给你的好友们哟~,现在开始吧!

咚动动画最新版系列软件最新版本下载

1.如何停止CSS3的动画


  们在移动端一般使用zepto框架,与其说zepto是jquery的轻量级替代版,不如说是html5替代版
 我们在js中会用到animate方法执行动画,这个家伙可是真资格的动画,完全是css一点点变化的!
 而zepto则不然,使用的是HTML5/CSS3的方案,而CSS相关是不保存元素状态值的,也没办法保存,所以停止动画就成了一大问题
 我们今天就一起来讨论下相关停止动画的方案,反正没有什么好的......
 CSS3动画原理
 在现有浏览器中,一般有两种模式(我只知道两种):
 一种是js动画,他是动态改写元素的style实现动画,所以任意时间想停止动画都是没问题的,因为我们可以获得各个阶段的状态值
 另一种就是CSS3动画了,至于CSS3动画的原理,我不知道但是可以说一点的就是——见代码
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <title></title>
 5 <script id="Script1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>
 6 </head>
 7 <body>
 8 <div id="Div1" style="background-color: Orange; width: 100px; height: 100px; position: absolute;
 9 left: 0; border: 1px solid black; ">
 10 </div>
 11 </body>
 12 <script src="../zepto.js" type="text/javascript"></script>
 13 <script type="text/javascript">
 14 var d = $('#d');
 15 d.animate({
 16 left: '100px'
 17 }, 10000);
 18
 19 setTimeout(function () {
 20 d.html('left: ' + d.css('left'));
 21 }, 1);
 22
 23 </script>
 24 </html>
http://sandbox.runjs.cn/show/xziwuir2
 zepto的animate事实上马上就改变了style的值,所以我们在里面看到了left为100px,虽然他正在运动
 而他动画的实现事实上使用的是CSS3的transition动画属性,我们这里来看看zepto的源码:
 View Code
 最后实际上是执行anim实现我们的动画,大家注意看这里
 $(this).css(cssReset)
 this.css(cssValues)
 他事实上搞了个先设置动画属性,再给style属性给元素,所以会产生动画
 到此,zepto实现动画原理我们大概知道了,现在问题就是如何停止他了,所以我们继续往下看
 如何停止动画
 我们先看看这个东西:
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <title></title>
 5 <script id="Script2" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>
 6 </head>
 7 <body>
 8 <div id="Div2" style="background-color: Orange; width: 100px; height: 100px; position: absolute;
 9 left: 0; border: 1px solid black;">
 10 </div>
 11 </body>
 12 <script src="../zepto.js" type="text/javascript"></script>
 13 <script type="text/javascript">
 14 var d = $('#d');
 15 d.animate({
 16 left: '100px'
 17 }, 10000);
 18
 19 setInterval(function () {
 20 d.html('left: ' + d.css('left') + ' _ offsetLeft: ' + d[0].offsetLeft);
 21 }, 1);
 22
 23 </script>
 24 </html>
http://sandbox.runjs.cn/show/gdqezvdo
 其中虽然left一开始就变了,我们惊奇的发现,offset这个家伙居然保存了我们的状态!!!
 我和我的小伙伴都惊呆了,因为我之前一直以为什么状态都不能获得,于是我们为他加上mousedown事件,各位运动时候点击试试
 我们这里这样干了下:
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <title></title>
 5 <script id="Script3" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>
 6 </head>
 7 <body>
 8 <div id="Div3" style="background-color: Orange; width: 100px; height: 100px; position: absolute;
 9 left: 0; border: 1px solid black;">
 10 </div>
 11 </body>
 12 <script src="../zepto.js" type="text/javascript"></script>
 13 <script type="text/javascript">
 14 var d = $('#d');
 15 d.animate({
 16 left: '100px'
 17 }, 10000);
 18
 19 setInterval(function () {
 20 d.html('left: ' + d.css('left') + ' _ offsetLeft: ' + d[0].offsetLeft);
 21 }, 1);
 22
 23 d.mousedown(function (e) {
 24 console.log(d);
 25 d.css('transition', 'left 0s linear');
 26 d.css('left', d[0].offsetLeft + 'px');
 27 });
 28
 29 </script>
 30 </html>
 于是我们发现,动画停止了,亲!他真的停止了!!!
 PS:因为项目过程中,我这里要模仿类似iscroll的滚动效果,所以使用的最多的就是top或者translate3d(0, 0, 0)这种东西
 结语
 本来这里还想深入一点研究下的,但是现在时间有点来不及,事情有点多,暂时到这里了吧,具体的demo争取周末搞出来

以上就是关于「css3动画如何停止」的全部内容,本文讲解到这里啦,希望对大家有所帮助。如果你还想了解更多这方面的信息,记得收藏关注本站~

文章♀来①自Win10系统之家,转载请联系网站管理人员!

相关文章

  • css3动画如何停止

    css3动画如何停止

    1.如何停止CSS3的动画们在移动端一般使用zepto框架,与其说zepto是jquery的轻量级替代版,不如说是html5替代版我们在js中会用到animate方法执行动画,这个家伙可是真资格的动画,完全是css一点点变化的!而zepto则不然,...
  • flash如何制作动画

    flash如何制作动画

    1.自己怎么制作FLASH动画?Flash是一个创作工具,从简单的动画到复杂的交互式Web应用程序(如在线商场),它使您可以创建任何作品。通过添加图片、声音和视频,可以使您的Flash应用程序媒体丰富多彩。Flash包含了许多种功能,...
  • qq如何录制视频动画

    qq如何录制视频动画

    1.怎样用QQ的录制视频动画?我玩电脑也有好几年了,因为我对PS非常喜欢,所以平时没事录制些视频教程啥的,这样就不断寻找录制软件,我总结下我认为比较好的软件:1.屏幕录像专家(这个就不用我多说了,现在又更新了,用了下...
  • 如何成为动画设计师

    如何成为动画设计师

    1.如何成为动漫设计师吗?基本不可能~~成为动漫设计师需要条件:1.一定的绘画基础(要求比较高,很多人就卡在这里了)2.几个常用的动漫制作软件熟练操作(AE,nuke,maya,ps。。。)3.长期的工作经历(刚进公司只能打杂)没有绘画...