(一) 本節知識點
- 可運動屬性
-- 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>
