(一) 本节知识点
- 可运动属性
-- css属性 宽度，大小等CSS样式
-- 透明度 autoAlpha
-- 位移 x,y(相当于translateX,和translateY)
-- 缩放 scal, scaleX,scaleY
-- 旋转 rotation, rotationX,rotationY,rotationZ
-- 斜切 skewX,skewY
代码
- 主要注意两点
-- (1)opacity 变成autoAlpha
-- (2) rotate 变成rotation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<script src="js/TweenMax.min.js"></script>
</head>
<body>
<style>
* {
margin: 0px;
padding: 0px;
}
#box {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0px;
top: 100px;
}
</style>
<div id="box"></div>
<button id="btn">按钮</button>
</body>
<script>
$(function() {
var TweenMax = new TimelineMax(); //必须创建对象
$("#btn").click(() => {
TweenMax.to("#box", 2, {
// left: 300,
// width: 400,
// height: 400,
// autoAlpha: 0, //当用autoAlpha使用渐变的时候。到0时候visible:hidden而opacity没有
//x: 400, //translateX
//y:300, //translateY
// scale: 0.5
//scaleX: 0.5,
//scaleY:0.5
// rotation: 45,
// rotationX:45,
// rotationY:45
// rotationZ:45
// skewX: 45,
// skewY: 45
})
})
})
</script>
</html>
网友评论