layui 动画 实现过程
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 动画 实现过程的更多相关文章
- Layui动画、按钮、表单
Layui动画.按钮.表单 在实用价值的前提之下,我们并没有内置过多花俏的动画.而他们同样在 layui 的许多交互元素中,发挥着重要的作用.layui 的动画全部采用 CSS3,因此不支持ie8和部 ...
- layui 上传图片 实现过程
layui.user一个页面只能有一个,写多了会实现js效果 上传图片官方文档有很多功能,但是演示的代码只是一个一个功能演示,如果要综合起来js代码不是简单的拼凑,需要放在指定位置,比如下面的限制文件 ...
- Android 开机动画启动过程详解
Android 开机会出现3个画面: 1. Linux 系统启动,出现Linux小企鹅画面(reboot)(Android 1.5及以上版本已经取消加载图片): 2. Android平台启动初始化,出 ...
- SVG描边动画实现过程
准备工具:Adobe AI+PS 1.确定SVG画布的大小,在PS中切出需要描边效果的区域,以此区域的大小做为SVG容器的大小. 2.将PS中切好的图片直接拖拽到AI中 3.使用AI中的钢 ...
- android动画的实现过程
先上自己的测试代码,有参考apidemo中的AnimationDrawable中的方法 public class AnimateActivity extends Activity { @Overrid ...
- Android开机动画、logo、字样的定制过程【转】
本文转载自:http://blog.csdn.net/yinhaide/article/details/43668401 Android开机画面总共有三屏 一.第一屏:开机logo 1.选张png格式 ...
- CSS 3学习——animation动画
以下内容根据官方文档翻译以及自己的理解整理. 1. 介绍 本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在 ...
- 前端制作动画的几种方式(css3,js)
制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...
- ReactNative入门 —— 动画篇(上)
在不使用任何RN动画相关API的时候,我们会想到一种非常粗暴的方式来实现我们希望的动画效果——通过修改state来不断得改变视图上的样式. 我们来个简单的示例: var AwesomeProject ...
随机推荐
- VisualStudio中集成扩展调试SOS
SOS扩展也是可以和VisualStudio进行集成的,这样真的方便了我们调试一些性能要求比较高的程序,当程序运行一段时间后我们用VS附加到进程,然后查看一些重要的对象数据,但是此时我们看不到.NET ...
- webpack打包vue单文件组件
一.vue单文件组件 ①文件扩展名为 .vue 的 就是single-file components(单文件组件) ②参考文档:单文件组件 二.webpack加载第三方包 ①项目中,如果需要用到一些第 ...
- Redis 迁移 DB; move key db
redis 移动 DB MOVE key db将当前数据库的 key 移动到给定的数据库 db 当中.如果当前数据库(源数据库)和给定数据库(目标数据库)有相同名字的给定 key ,或者 key 不存 ...
- js中的逗号运算符
逗号运算符 逗号运算符是二元运算符,它的操作数可以是任意类型.它首先计算左操作数,然后计算右操作数,最后返回右操作数的值,用逗号运算符可以在一条语句中执行多个运算 作用: 1.在一条语句中从左到右执行 ...
- vuex实现登录状态的存储,未登录状态不允许浏览
基础思路就是使用vuex状态管理来存储登录状态(其实就是存一个值,例如token),然后在路由跳转前进行登录状态的判断,可以使用vue-router的全局前置守卫beforeEach,也可以使用路由独 ...
- shell 单引号以及双引号
#!/bin/bash a= echo '$a' echo "$a" your_name='runoob' str="Hello, I know you are \&qu ...
- 刷题记录:[强网杯 2019]Upload
目录 刷题记录:[强网杯 2019]Upload 一.知识点 1.源码泄露 2.php反序列化 刷题记录:[强网杯 2019]Upload 题目复现链接:https://buuoj.cn/challe ...
- FCN内容通读
本文完全为个人心得体会,只做记录用,欢迎交流 替换全连接层为卷积层 以alexnet为例,替换了最后三层fc为卷积层,得到的是通道数很大(4096)而长宽很小的输出,其实我不太能理解这里的创新点,或许 ...
- linux 线程查看 和 Jvm栈线程ID对应
一.proc查看进程和线程 该方法是个人最为推荐,也最喜欢的一种方法.进程文件下,有几种方式可以获取目前进程开启的进程数. 查看status文件: # cat /proc//status Name: ...
- Win10登陆界面卡住,进去后无法打开网络相关的设置,谷歌浏览器无法上网
今天Win10抽风,进入登录页面输入用户名和密码之后,大约过了10分钟才进入桌面.重启后仍然如此. 经过调查,问题主要出在网络相关模块上,网络无法正常初始化,导致登录一直卡在网络初始化上. 解决方法如 ...