jQuery Transit 过渡效果基础示例

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!DOCTYPE html>
<html>
	<head>
		<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
		<link rel="stylesheet" href="//ku.shouce.ren/libs/transit/css/demo.css">
		<link rel="stylesheet" href="//ku.shouce.ren/libs/transit/css/layout.css">
		<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js">
		</script>
		<script src="//ku.shouce.ren/libs/chili/js/jquery.chili-2.2.min.js">
		</script>
		<script src="//ku.shouce.ren/libs/chili/js/recipes.js">
		</script>
		<script src="//ku.shouce.ren/libs/transit/js/jquery.transit.min.js">
		</script>
	</head>
	<body> 
		<div class="main">
			<div class="inwrap">
				<h1>jQuery Transit 过渡效果
				</h1>
				<h2>基础示例
				</h2>
				<div class="detail">
					<p id="jquery-version" class="version">
					</p>
				</div>
				<div class="example">
					<button class="play-all button green">Play all
					</button>
				</div>
				<div class="example">
					<div class="tests">
					</div>
				</div>
			</div>
		</div>		
		<script src="//ku.shouce.ren/libs/transit/js/test.js">
		</script>
		<script>
			group('变换效果');
			test('过渡', function($box){
				$box.transition({
					x: 20, y: 20 }
							   );
			}
				);
			test('旋转', function($box){
				$box.transition({
					rotate: 45 }
							   );
			}
				);
			test('旋转，设置值为字符串', function($box){
				$box.transition({
					rotate: '45deg' }
							   );
			}
				);
			test('斜切 X 轴', function($box){
				$box.transition({
					skewX: 30 }
							   );
			}
				);
			test('斜切 Y 轴', function($box){
				$box.transition({
					skewY: 30 }
							   );
			}
				);
			test('斜切 XY 轴', function($box){
				$box.transition({
					skewY: 30, skewX: 30 }
							   );
			}
				);
			test('放大', function($box){
				$box.transition({
					scale: 2 }
							   );
			}
				);
			test('缩小', function($box){
				$box.transition({
					scale: 0.5 }
							   );
			}
				);
			group('3D 变换效果');
			test('旋转 X 轴', function($box){
				$box.transition({
					perspective: '500px',
					rotateX: 180
				}
							   );
			}
				);
			test('旋转 Y 轴', function($box){
				$box.transition({
					perspective: '500px',
					rotateY: 180
				}
							   );
			}
				);
			test('旋转 XY 轴', function($box){
				$box.transition({
					perspective: '500px',
					rotateX: 180,
					rotateY: 180
				}
							   );
			}
				);
			group('参数');
			test('延时', function($box){
				$box.transition({
					rotate: 45,
					delay: 150
				}
							   );
			}
				);
			test('0 延时', function($box){
				$box.transition({
					x: 50, delay: 0 }
							   )
					.transition({
					x: 0 }
							   );
			}
				);
			test('贝赛尔曲线 (should be snappy)', function($box){
				$box.transition({
					x: 100
				}
								,500, 'cubic-bezier(0, 0.9, 0.3, 1)');
			}
				);
			group('链式方法');
			test('队列', function($box){
				$box.transition({
					x: 50 }
							   )
					.transition({
					x: 0 }
							   )
					.transition({
					y: 50 }
							   )
					.transition({
					y: 0 }
							   );
			}
				);
			test('过渡时间为 0 (should not flicker)', function($box){
				$box.transition({
					x: 50 }
								, 0)
					.transition({
					x: 0 }
								, 0)
					.transition({
					y: 50 }
								, 0);
			}
				);
			group('回调函数');
			test('设置为第 2 个参数', function($box){
				$box.transition({
					rotate: 45
				}
								, function(){
					$box.html('OK');
				}
							   );
			}
				);
			test('设置为第 3 个参数', function($box){
				$box.transition({
					rotate: 45
				}
								, 500, function(){
					$box.html('OK');
				}
							   );
			}
				);
			test('设置为 "complete" 参数', function($box){
				$box.transition({
					rotate: 45,
					complete: function(){
						$box.html('OK');
					}
				}
							   );
			}
				);
			group('其他');
			test('CSS 与过渡', function($box){
				$box.css({
					x: -50 }
						)
					.transition({
					x: 50 }
							   );
			}
				);
			test('透明度', function($box){
				$box.transition({
					opacity: 0
				}
							   );
			}
				);
			test('transform 过渡 (no jump first time)', function($box){
				$box.transition({
					transform: 'translateX(80px)'
				}
							   );
			}
				);
		</script>
	</body>
</html>

​x
 
<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
        <link rel="stylesheet" href="//ku.shouce.ren/libs/transit/css/demo.css">
        <link rel="stylesheet" href="//ku.shouce.ren/libs/transit/css/layout.css">
        <script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js">
        </script>
        <script src="//ku.shouce.ren/libs/chili/js/jquery.chili-2.2.min.js">
        </script>
        <script src="//ku.shouce.ren/libs/chili/js/recipes.js">
        </script>
        <script src="//ku.shouce.ren/libs/transit/js/jquery.transit.min.js">
        </script>
    </head>
    <body> 
        <div class="main">
            <div class="inwrap">
                <h1>jQuery Transit 过渡效果
                </h1>
                <h2>基础示例
                </h2>