H5之13__CSS过渡、动画和变换

一. 简介

<body>
	<p id="touchme">
		<button class="button" id="toggle" style="width:100%; height:60px;">Toggle Picture</button>
		<p  class="picture hidden">
			<br/><br/>
			<a><img src="http://img1.2345测试数据/duoteimg/qqTxImg/2012/04/09/13339510584349.jpg"
					 width="320" height="256" alt="Goldfinch">
			</a>
		</p>
	</p>
</body>

/***应用过渡 ***/
.picture {
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  opacity: 1;
}
.picture.hidden {
  opacity: 0;
}

完整的html页面如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width">
	<title>Touch</title>
	<link rel="stylesheet" src="screen.css" charset="utf-8">
</head>
<body>
	<p id="touchme">
		<button class="button" id="toggle" style="width:100%; height:60px;">Toggle Picture</button>
		<p  class="picture hidden">
			<br/><br/>
			<a><img src="http://img1.2345测试数据/duoteimg/qqTxImg/2012/04/09/13339510584349.jpg"
					 width="320" height="256" alt="Goldfinch">
			</a>
		</p>
	</p>
</body>
<script src="facade.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
(function(){
	//查找样式选择器
	var h = document.querySelector(".picture");
	
	function fadeIn() {
		var h = document.querySelector(".picture");
		var opacity = parseFloat(h.style.opacity);
		if(opacity < 1) {
			opacity = opacity + 0.05;
			h.style.opacity = opacity;
			window.setTimeout(fadeIn, 33);
		}
	}
	
	function fadeOut() {
		var opacity = parseFloat(h.style.opacity);
		if(opacity > 0.2) {
			opacity = opacity - 0.1;
			h.style.opacity = opacity;
			window.setTimeout(fadeOut, 10);
		} else {
			h.style.opacity = 0;
		}
		
	}
	
	var hidden = true;
	function togglePicture(){
		var h = document.querySelector(".picture");
		if(hidden) {
			h.className = "picture";
			fadeIn();
			hidden = false;
		} else {
			h.className = "picture hidden";
			 fadeOut();
			hidden = true;
		}
	}

	$('.button').on('tap', function(e) {
		e.preventDefault();
		togglePicture();
		e.target.className = "active button";
	}).on('tapend', function(e) {
		e.target.className = "button";
	});
	
})();
</script>
</html>

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  text-align: center;
}

.button {
  font-size: 16px;
  padding: 10px;
  font-weight: bold;
  border: 0;
  color: #fff;
  border-radius: 10px;
  box-shadow: inset 0px 1px 3px #fff, 0px 1px 2px #000;
  background: #ff3019;
  opacity: 1;
}

.active, .button:active {
  box-shadow: inset 0px 1px 3px #000, 0px 1px 2px #fff;
}

/***应用过渡 ***/
.picture {
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  -o-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  opacity: 1;
}
.picture.hidden {
  opacity: 0;
}

以上就是H5之13__CSS过渡、动画和变换的内容，更多相关内容请关注PHP中文网（HdhCmsTestgxlcms测试数据）！

查看更多关于H5之13__CSS过渡、动画和变换的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did65670

更新时间：2022-10-13 阅读：44次