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. HOL的多表查询——内连接、外连接

    1.内连接: 由于学生和班级是多对一的关系,班级对应学生是一对多的关系,因此,需要先对学生和班级进行配置. (1)创建Student类(多的一方): package pers.zhb.domain; ...

  2. Xamarin.Android开发

    使用 Visual Studio 生成第一个 Xamarin.Android 应用程序,并进一步了解使用 Xamarin 进行 Android 应用程序开发的基础知识.在此过程中,会介绍生成和部署 X ...

  3. C函数之index、strtoul

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

  4. JavaScript初探系列（六）——函数

    一.概述 (一)函数的声明 JavaScript 有三种声明函数的方法. (1)function 命令 function命令声明的代码区块,就是一个函数.function命令后面是函数名,函数名后面是 ...

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

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

  6. Linux（环境篇）：系统搭建本地FTP后，无法登录（331 Please specify the password.）问题解决

    首先 Linux 搭建ftp,开放21端口.(省略...) 你可能会遇到以下问题:错误 SELinux is disabled 解决: setenforce: SELinux is disabled ...

  7. 【Swoole】计一次swoole_server配合laravel5启动报错：Address already in use[98]

     [2019-11-11 11:42:25 @21371.0] WARNING swSocket_bind(:434): bind(0.0.0.0:9501) failed, Error: Addre ...

  8. str.replace替换变量名的字符串

    网易云课堂该课程链接地址 https://study.163.com/course/courseMain.htm?share=2&shareId=400000000398149&cou ...

  9. 【Python】解析Python中的文件操作

    目录结构: contents structure [-] 简介 Python中的文件类型 内置函数的文件操作 open()函数 Mode 创建文本文件 读取文本文件 循环文件对象 关闭文件 With语 ...

  10. WebDataBinder 学习顺序

    01. 关于Spring属性处理器PropertyResolver以及应用运行环境Environment的深度分析,强大的StringValueResolver使用和解析[享学Spring] http ...