animate.css效果预览页

最新推荐文章于 2023-02-09 10:34:38 发布

酢排骨

最新推荐文章于 2023-02-09 10:34:38 发布

阅读量1k

点赞数

分类专栏： Css3 animate.css 文章标签： javascript animate.css

本文链接：https://blog.csdn.net/u010437435/article/details/39696343

版权

Css3 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

animate.css

1 篇文章 0 订阅

订阅专栏

一、编写原因：

由于animate.css作者的官方效果预览网站无法登陆，为了方便自己预览各个效果

二、实现思路：

刚开始想把animate.css的所有类都筛选出来，写个静态的数组，但是由于比较懒，所以想了其他办法:用正则表达式从样式表里面筛选出来所有的类，然后当select触发change事件的时候来改变实例的class

三、代码实现：

样式表：base.css主要是用来reset样式的、style.css的样式如下

html{
	height: 100%;
}
body{
	background: #E9E9E9;
	font-family: 'Poiret One',cursive,serif;
	height: 100%;
	overflow: hidden;
}
.main{
	width: 960px;
	margin: 0 auto;
	height: 100%;
}
#prew{
	padding-top: 100px;
	font-size: 50px;
	color: #666;
	text-align: center;
}
.classStyle{
	font-size: 40px;
	height:60px;
	line-height: 60px;
	background-color: #3299BB;
	background: rgba(50, 153, 187, .5) !important;
	text-shadow: 0 1px white;
	width:100%;
	margin-top: 50px;
	border-radius: 10px;
	outline: none;
	padding-left: 50px; 
}

（1）使用jQuery+animate.css

index.html 代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>animate.css</title>

		<meta name="viewport" content="width=device-width; initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="css/base.css">
		<link href="css/animate.css" rel="stylesheet" type="text/css" />
		<link href="css/style.css" rel="stylesheet" type="text/css" />
		<script src="js/jquery.js"></script>
	</head>

	<body>
		<div class="main">
			<h1  id="prew">Animate Preview</h1>
			<select id="class_container" class="classStyle"></select>
		</div>
		<script type="text/javascript">
		$(function(){
			$.ajax({
				url:"css/animate.css",
				success: function(r){
					var arr = r.match(/\.\w* \{/g),
						classes = [],//所有的类名
						template = "",
						$select = $("#class_container"),
						$prew = $("#prew");
					for(var i = 0;i<arr.length;i++){//去除animated类
						if(i == 0){
							template += '<option value="">请选择样式</option>';
						}else{
							classes[i] = arr[i].match(/\w+/);
							template += '<option value="'+classes[i]+'">'+classes[i]+'</option>';
						}
						
					}
					$select.html(template);	
					$select.change(function(){
						var val = $(this).val();
						$prew.removeClass().addClass("animated").addClass(val);
						$prew[0].addEventListener("webkitAnimationEnd",function(){
							$prew.removeClass();
						});
					})

				}
			})
		})
		</script>
	</body>
</html>

（2）由于最近刚开始学习angularJs，所以又用angular写了一个

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>animate.css</title>

		<meta name="viewport" content="width=device-width; initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="../css/base.css">
		<link href="../css/animate.css" rel="stylesheet" type="text/css" />
		<link href="../css/style.css" rel="stylesheet" type="text/css" />
		<script src="../js/angular.js"></script>
	</head>

	<body>
		<div class="main" ng-controller="classesCtrl">
			<animatePre></animatePre>
			<select id="class_container" class="classStyle" ng-model="value" ng-options="item for item in items">
				<option value="">请选择</option>
			</select>
		</div>
		<script type="text/javascript">
		var myApp_module = angular.module("myApp",[]);
		myApp_module.controller('classesCtrl', ['$scope','$http', function($scope,$http){
			$http.get("../css/animate.css").success(function(r){
				var arr = JSON.stringify(r.match(/\.\w* \{/g));
				$scope.items = arr.match(/\w+/g);
				$scope.items.shift();
			});
		}]);
		myApp_module.directive("animatepre",function(){
			return {
				restrict: 'EA',
				controller:'',
				template: '<h1 id="prew" class="animated {{value}}" data-value="{{value}}">Animate Preview</h1>',
				replace: true,
				link: function(scope,element,attrs){
					element[0].addEventListener("webkitAnimationEnd",function(){
						element.removeClass(element.attr("data-value"));
						this.removeEventListener("webkitAnimationEnd");
					});
				}
			}
		});
		</script>
	</body>
</html>

页面效果：