layui官方文档晦涩难懂,对小白特别不友好

为演示效果,js和css文件引用cdn

演示是ul套li标签进行演示,这不是固定的,你也可以div套div,div套span,外面和里面的标签类要一一对应就行

官方文档演示没有提js语句的使用,直接写html代码是没有动画效果的,所以需要使用layui的js语句

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>layui动画测试</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<style>
.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>
</li>
<li>
<div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
</li>
<li>
<div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
</li>
<li>
<div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
</li>
</ul>
<ul class="site-doc-icon site-doc-anim">
<li>
<div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
</li>
<li>
<div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
</li>
<li>
<div class="layui-anim" data-anim="layui-anim-rotate">360度旋转</div>
</li>
<li>
<div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
</li>
</ul> <script>
layui.use([], function () {
var $ = layui.jquery;
//演示动画开始
$('.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>

layui 动画 实现过程的更多相关文章

  1. Layui动画、按钮、表单

    Layui动画.按钮.表单 在实用价值的前提之下,我们并没有内置过多花俏的动画.而他们同样在 layui 的许多交互元素中,发挥着重要的作用.layui 的动画全部采用 CSS3,因此不支持ie8和部 ...

  2. layui 上传图片 实现过程

    layui.user一个页面只能有一个,写多了会实现js效果 上传图片官方文档有很多功能,但是演示的代码只是一个一个功能演示,如果要综合起来js代码不是简单的拼凑,需要放在指定位置,比如下面的限制文件 ...

  3. Android 开机动画启动过程详解

    Android 开机会出现3个画面: 1. Linux 系统启动,出现Linux小企鹅画面(reboot)(Android 1.5及以上版本已经取消加载图片): 2. Android平台启动初始化,出 ...

  4. SVG描边动画实现过程

    准备工具:Adobe AI+PS 1.确定SVG画布的大小,在PS中切出需要描边效果的区域,以此区域的大小做为SVG容器的大小.   2.将PS中切好的图片直接拖拽到AI中     3.使用AI中的钢 ...

  5. android动画的实现过程

    先上自己的测试代码,有参考apidemo中的AnimationDrawable中的方法 public class AnimateActivity extends Activity { @Overrid ...

  6. Android开机动画、logo、字样的定制过程【转】

    本文转载自:http://blog.csdn.net/yinhaide/article/details/43668401 Android开机画面总共有三屏 一.第一屏:开机logo 1.选张png格式 ...

  7. CSS 3学习——animation动画

    以下内容根据官方文档翻译以及自己的理解整理. 1.  介绍 本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在 ...

  8. 前端制作动画的几种方式(css3,js)

    制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...

  9. ReactNative入门 —— 动画篇(上)

    在不使用任何RN动画相关API的时候,我们会想到一种非常粗暴的方式来实现我们希望的动画效果——通过修改state来不断得改变视图上的样式. 我们来个简单的示例: var AwesomeProject ...

随机推荐

  1. VMware空虚拟机通过网络安装系统时获取不到IP地址情况(基于Linux的DHCP服务器)

    当虚拟机提示no DHCP or proxyDHCP offers were received时 1.dhcp服务配置错误(留意句尾分号“  :”) 2.dhcp服务未启动(用 systemctl s ...

  2. win10系统绑定本地IP和mac地址

    第一步:找到自己的IP和mac地址 1.按着win键+R键,输入cmd(大小写都一样) 2.命令: ipconfig   /all              #查看所有地址 然后按“回车键” 3.这样 ...

  3. C函数之index、strtoul

    index函数 函数定义: #include<strings.h> char *index(const char *s, int c); 函数说明: 找出参数s字符串中第一个出现参数c的地 ...

  4. [已解决] Python logging 重复打印日志信息

    问题描述 问题代码如下: def get_logger(logger_name): """得到日志对象""" logger = loggin ...

  5. vue.js动态绑定input的checked

    不管<input type='radio checked='true''>  你的checked属性值是true或者false,他都会选中. 其实原理是这样的,复选框里只要有checked ...

  6. Java编程思想之三 操作符

    在底层,Java中的数据是通过使用操作符来操作的. 3.2 使用Java操作符 操作符接收一个或多个参数,并生成一个新值. 操作符作用于操作数,生成一个新值.有些操作符可能会改变操作数自身的值,这被称 ...

  7. dashi 成长 > 领导 > 平台 > 钱 人品 态度 能力 价值

    https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=thy3557s https://www.aliyun.com/min ...

  8. github将本地仓库的代码上传到Github

    本篇主要参考博文:https://blog.csdn.net/IT_faquir/article/details/52516214 你要先完成上一篇的操作,即将代码上传到本地仓库中,才能上传到gith ...

  9. A Full Hardware Guide to Deep Learning深度学习电脑配置

     https://study.163.com/provider/400000000398149/index.htm?share=2&shareId=400000000398149( 欢迎关注博 ...

  10. i系列标准-互联网周刊

    原文:http://www.enet.com.cn/article/2019/0429/A20190429062899.html 传统意义上的规模.现代意义上的工具时代感.永远不会改变的最高意义上的使 ...