跨浏览器transform
anim模块支持跨浏览器的transform动画，包括IE8等浏览器
transform示例一
Source
Output
QRCode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>transform</title>
<script charset="utf-8" src="//g.alicdn.com/kissy/k/5.0.1/seed.js"></script>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
background: #fff;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.prettyprint {
font-family: monospace;
font-size: 11px;
}
.str {
color: #BFAC00;
}
.kwd, .typ {
color: #BF5600;
}
.com {
color: #111;
}
.lit {
color: #26BF00;
}
.pun, .opn, .clo {
color: #999;
}
.pln {
color: #DDD;
}
.tag {
color: #008;
}
.atn {
color: #606;
}
.atv {
color: #080;
}
.dec {
color: #606;
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums {
margin-top: 0;
margin-bottom: 0
}
/* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 {
list-style-type: none
}
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 {
background: #eee
}
/*------------------------------------*\
MAIN
\*------------------------------------*/
body {
background: #333;
width: 1000px;
margin: 0 auto;
color: #FFF;
overflow-x: hidden;
font-family: Arial, "Liberation Sans", sans;
}
header h1 {
font-family: 'Josefin Slab', arial, serif;
font-size: 6em;
color: #BBB;
text-shadow: 1px 0px #FFF;
margin: 30px 0 5px;
}
section, footer {
clear: both;
}
h2 {
font-family: 'Josefin Slab', arial, serif;
font-size: 2em;
padding: 2em 0 .3em;
}
footer a {
color: #FFF;
text-decoration: underline;
}
footer {
font-size: .8em;
text-align: right;
margin: 4em 0 2em;
}
#basic li {
display: inline-block;
width: 250px;
}
.square {
width: 100px;
height: 100px;
position: absolute;
}
.fright {
float: right;
}
.fleft {
float: left;
}
.color1 {
background: #bf0000;
color: #bf0000;
}
.color2 {
background: #bf5600;
color: #bf5600;
}
.color3 {
background: #bfac00;
color: #bfac00;
}
.color4 {
background: #7cbf00;
color: #7cbf00;
}
.color5 {
background: #26bf00;
color: #26bf00;
}
.color6 {
background: #00bf2f;
color: #00bf2f;
}
.color7 {
background: #00bf85;
color: #00bf85;
}
.color8 {
background: #00a2bf;
color: #00a2bf;
}
.color9 {
background: #004cbf;
color: #004cbf;
}
.color10 {
background: #0900bf;
color: #0900bf;
}
.color11 {
background: #5f00bf;
color: #5f00bf;
}
.color12 {
background: #b500bf;
color: #b500bf;
}
</style>
</head>
<body>
<section id="basic" style="position: relative;height: 400px">
<h2>Basic usage</h2>
<ul>
<li><pre class="brush: js;">KISSY.all(elem).animate({
transform: 'translateX(50px)'
});</pre>
<li><pre class="brush: js;">KISSY.all(elem).animate({
transform: 'rotate(135deg)'
});</pre>
<li><pre class="brush: js;">KISSY.all(elem).animate({
transform: 'scale(2,.5)'
});</pre>
<li><pre class="brush: js;">KISSY.all(elem).animate({
transform: 'skewX(35deg) skewY(15deg)'
});</pre>
</ul>
<div style="position: relative;padding: 40px 0;height: 300px">
<div id="basic1" class="square color1" style="position: absolute; margin-left: 0;"
data-trans="translateX(50px)"></div>
<div id="basic2" class="square color2"
style="left: 150px"
data-trans="rotate(135deg)"></div>
<div id="basic3" class="square color3"
style="left: 300px"
data-trans="scale(2,.5)"></div>
<div id="basic4" class="square color4"
style="left: 450px"
data-trans="skewX(35deg) skewY(15deg)"></div>
</div>
</section>
<section>
<h2>Advanced usage</h2>
<div id="advanced" style="height: 150px; position: relative;">
<div id="basic5"
style="left:200px"
class="square cover color5"></div>
<div id="basic6"
style="left:220px"
class="square cover color6"></div>
<div id="basic7"
style="left:240px;z-index: 2"
class="square cover color7"></div>
<div id="basic8"
style="left:260px"
class="square cover color8"></div>
</div>
</section>
<script>
require(['node'], function (Node) {
var $ = Node.all;
$('.square').on('mouseenter',function(e){
var currentTarget = $(e.currentTarget);
if (!currentTarget.isRunning()) {
currentTarget.animate({
transform: currentTarget.attr('data-trans')
}, {
//useTransition:1,
duration: 0.4
});
currentTarget.animate({
x: 1
}, {
//useTransition:1,
delay: 2,
duration: 0.1,
complete: function () {
currentTarget.css('opacity', .5)
}
}).animate({
transform: ''
}, {
//useTransition:1,
duration: 0.4,
complete: function () {
currentTarget.css('opacity', 1)
}
});
}
})
var transforms = [
'scale(.66) skewY(-45deg)',
'translate(20px) scale(.66) skewY(-45deg)',
'translate(150px,50px) scale(1.5,1)',
'translate(280px) scale(.66) skewY(45deg)',
'translate(300px) scale(.66) skewY(45deg)'
],
$squares = $('#advanced .square').each(function (v, i) {
$(v).css({ transform: transforms[i] });
});
$('#advanced').on('mouseenter',function () {
$squares.each(function (v, i) {
v.stop();
v.animate({ transform: transforms[i + 1] }, {
duration: 0.4
});
});
}).on('mouseleave', function () {
$squares.each(function (v, i) {
v.stop();
v.animate({ transform: transforms[i] }, {
duration: 0.4
});
});
});
});
</script>
</body>
</html>
transform示例二
Source
Output
QRCode
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<style>
body {
background-color: #fff;
overflow: hidden;
}
.t {
border: 1px solid transparent;
position: absolute;
top: 200px;
left: 200px;
/*
ie
margin: 100px;
*/
}
#t2 {
top: 200px;
left: 500px;
}
.t {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<h1 style="color:white;text-align: center">360</h1>
<button id="run">run</button>
<div id="t" class="t">
</div>
<div id="t2" class="t">
</div>
<script src="//g.alicdn.com/kissy/k/5.0.1/seed.js"></script>
<script>
require(['dom','anim','node'], function (Dom, Anim, Node) {
var t = Dom.get('#t');
var t2 = Dom.get('#t2');
Dom.css(t, 'transform-origin', '0px 0px');
var run = false;
Node.all('#run').on('click', function () {
if (run) {
return;
}
run = true;
new Anim(t, {
transform: 'rotate(360deg)'
}, {
duration: 1,
complete: function () {
Dom.css(t, 'transform', '');
run = false;
}
}).run();
var a2 = new Anim(t2, {
transform: 'rotate(360deg)'
}, {
duration: 1,
complete: function () {
Dom.css(t2, 'transform', '');
S.log('done2');
}
});
a2.run();
});
});
</script>
</body>
</html>