004-CSS3动画类

1. 在实用价值的前提之下, layui并没有内置过多花俏的动画。而他们同样在layui的许多交互元素中, 发挥着重要的作用。layui的动画全部采用CSS3。

2. 使用方式

2.1. 动画的使用非常简单, 直接对元素赋值动画特定的class类名即可。如:

// 其中layui-anim是必须的, 后面跟着的即是不同的动画类
<div class="layui-anim layui-anim-up"></div>
     
// 循环动画, 追加: layui-anim-loop
<div class="layui-anim layui-anim-up layui-anim-loop"></div>

3. 内置CSS3动画一览表

3.1. 下面是不同的动画类名:

4. 例子

4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS3动画类</title>
		
		<link rel="stylesheet" href="layui/css/layui.css">
		<script type="text/javascript" src="layui/layui.js"></script>

		<style>
			.site-doc-icon { width: 892px; font-size: 0; }
			.site-doc-icon li {
				display: inline-block; 
				vertical-align: middle; 
				width: 222px; 
				height: auto; 
				line-height: 25px; 
				padding: 20px 0; 
				margin-right: -1px; 
				margin-bottom: -1px; 
				border: 1px solid #e2e2e2; 
				font-size: 14px; 
				text-align: center; 
				color: #666; 
				transition: all 0.3s; 
			}
			.site-doc-icon li:hover { background-color: #f2f2f2; color: #000; }
			.site-doc-icon li .layui-anim {
				width: 150px; 
				height: 150px; 
				line-height: 150px; 
				margin: 0 auto 10px; 
				text-align: center; 
				background-color: #009688; 
				cursor: pointer; 
				color: #fff; 
				border-radius: 50%;
			}
		</style>
	</head>

	<body>
		<ul class="site-doc-icon site-doc-anim">
	      	<li>
		        <div class="layui-anim" data-anim="layui-anim-up">从最底部往上滑入</div>
		        <div>layui-anim-up</div>
	      	</li>
	      	<li>
		        <div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
		        <div>layui-anim-upbit</div>
	      	</li>
	      	<li>
		        <div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
		        <div>layui-anim-scale</div>
	      	</li>
	      	<li>
		        <div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
		        <div>layui-anim-scaleSpring</div>
	      	</li>
	      	<li>
		        <div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
		        <div>layui-anim-fadein</div>
	      	</li>
	      	<li>
		        <div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
		        <div>layui-anim-fadeout</div>
	      	</li>
	      	<li>
		        <div class="layui-anim" data-anim="layui-anim-rotate">360度旋转</div>
		        <div>layui-anim-rotate</div>
	      	</li>
	      	<li>
		        <div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
		        <div>追加:layui-anim-loop</div>
	      	</li>
    	</ul>
		
		<script type="text/javascript">
			layui.use('jquery', function(){
  				var $ = layui.$;
  
  				// 演示动画
  				$('.site-doc-icon .layui-anim').on('click', function(){
    				var othis = $(this), anim = othis.data('anim');
 
			    	// 停止循环
			    	if(othis.hasClass('layui-anim-loop')){
			      		return othis.removeClass(anim);
			    	}
			    
			    	othis.removeClass(anim);
			    
			    	setTimeout(function(){
			      		othis.addClass(anim);
			    	});

			    	// 恢复渐隐
			    	if(anim === 'layui-anim-fadeout'){
			      		setTimeout(function(){
			        		othis.removeClass(anim);
			      		}, 1300);
		    		}
		  		});
			});
		</script>
	</body>
</html>

4.2. 效果图

已标记关键词 清除标记
相关推荐
【为什么还需要学习C++?】 你是否接触很多语言,但从来没有了解过编程语言的本质? 你是否想成为一名资深开发人员,想开发别人做不了的高性能程序? 你是否经常想要窥探大型企业级开发工程的思路,但苦于没有基础只能望洋兴叹?   那么C++就是你个人能力提升,职业之路进阶的不二之选。 【课程特色】 1.课程共19大章节,239课时内容,涵盖数据结构、函数、、指针、标准库全部知识体系。 2.带你从知识与思想的层面从0构建C++知识框架,分析大型项目实践思路,为你打下坚实的基础。 3.李宁老师结合4大国外顶级C++著作的精华为大家推出的《征服C++11》课程。 【学完后我将达到什么水平?】 1.对C++的各个知识能够熟练配置、开发、部署; 2.吊打一切关于C++的笔试面试题; 3.面向物联网的“嵌入式”和面向大型化的“分布式”开发,掌握职业钥匙,把握行业先机。 【面向人群】 1.希望一站式快速入门的C++初学者; 2.希望快速学习 C++、掌握编程要义、修炼内功的开发者; 3.有志于挑战更高级的开发项目,成为资深开发的工程师。 【课程设计】 本课程包含3大模块 基础篇 本篇主要讲解c++的基础概念,包含数据型、运算符等基本语法,数组、指针、字符串等基本词法,循环、函数、等基本句法等。 进阶篇 本篇主要讲解编程中常用的一些技能,包含的高级技术、的继承、编译链接和命名空间等。 提升篇: 本篇可以帮助学员更加高效的进行c++开发,其中包含型转换、文件操作、异常处理、代码重用等内容。
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页