本邮件内容由第三方提供，如果您不想继续收到该邮件，可点此退订。

如何停止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的源码：

1 var prefix = '', eventPrefix, endEventName, endAnimationName,
2 vendors = { Webkit: 'webkit', Moz: '', O: 'o', ms: 'MS' },
3 document = window.document, testEl = document.createElement('div'),
4 supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i,
5 transform,
6 transitionProperty, transitionDuration, transitionTiming,
7 animationName, animationDuration, animationTiming,
8 cssReset = {}
9
10 function dasherize(str) { return downcase(str.replace(/([a-z])([A-Z])/, '$1-$2')) }
11 function downcase(str) { return str.toLowerCase() }
12 function normalizeEvent(name) { return eventPrefix ? eventPrefix + name : downcase(name) }
13
14 $.each(vendors, function (vendor, event) {
15 if (testEl.style[vendor + 'TransitionProperty'] !== undefined) {
16 prefix = '-' + downcase(vendor) + '-'
17 eventP

在RedHat.Enterprise.Linux_v6.3系统中安装Oracle_11gR2教程 - 七少爷 阅读原文»

在RedHat.Enterprise.Linux_v6.3系统中安装Oracle_11gR2教程

本教程提供PDF格式下载：

　　在RedHat.Enterprise.Linux_v6.3系统中安装Oracle_11gR2教程.part1.rar

　　在RedHat.Enterprise.Linux_v6.3系统中安装Oracle_11gR2教程.part2.rar

前言

　　本人24K纯DIAOS级无证光棍CodeMaker，近日闲来无事，便开始研究如何在Linux系统中安装Oracle11g数据库。在谷哥和度娘的帮助下，经过不断地尝试，终于顺利地在Linux系统中成功安装和配置了Oracle11g数据库。

　　这里将我的安装步骤和相关代码整理成一篇参考教程文档，希望对有需要的朋友有所帮助。因能力水平有限，有所纰漏在所难免，还请各位大神积极斧正。

　　好了，闲话不多说，开始进入正题。

　　　　安装环境：虚拟机VMware Workstation 10.0

　　　　操作系统： 64位系统，RedHat.Enterprise.Linux.Server-v6.3-x86_x64.ISO

　　　　Oracle版本： Linux_x64_Oracle_11gR2_v11.2.0.1.0

　　安装过程主要分为以下3步：

配置系统参数
软件安装与数据库配置
配置优化与测试

PS：在本教程中，所有方框均代表在Linux系统的终端进行操作，其中：

　　蓝色字体：终端命令代码；

　　红色字体：新增或修改的参数。

rhel6_dvd
enabled=1
gpgcheck=0
1.2.4、清空 yum 信息
[root@rhel6 yum.repos.d]# yum clean all
1.2.5、更新 yum 信息
[root@rhel6 yum.repos.d]# yum update
1.2.6、安装依赖软件包
[root@rhel6 yum.repos.d]# yum install binutils-2.* compat-libstdc++-33* elfutils-libelf-0.* elfutils-libelf-devel-* gcc-4.* gcc-c++-4.* glibc-2.* glibc-common-2.* glibc-devel-2.* glibc-headers-2.* ksh-2* libaio-0.* libaio-devel-0.* libgcc-4.* libstdc++-4.* libstdc++-devel-4.* make-3.* sysstat-7.* unixODBC-2.* unixODBC-devel-2.* pdksh*
[root@rhel6 yum.repos.d]# cd
因为版本不同，在第2章软件安装及数据库配置过程，可能会提示缺少依赖包，忽略后可以正常安装使用 Oracle。

1.3、修改系统内核参数阅读更多内容

IT教程

2013年11月18日星期一

如何停止CSS3的动画？ - 叶小钗

没有评论:

发表评论