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. Wbbpack --3配置

    Wbbpack --3配置 什么是webpack webpack 是一个现代 JavaScript 应用程序的静态模块打包(modulebundler)当 webpack 处理应用程序时,它会递归地构 ...

  2. 用户生命周期（User Lifetime）

    什么是用户生命周期? 用户生命周期是从用户开始接触产品到离开产品的整个过程.用户生命周期可分为:引入期.成长期.成熟期.休眠期.流失期.对应的是用户对产品不同的参与程度. 用户生命周期有什么用? 按照 ...

  3. Technocup 2020 Elimination Round 3题解

    传送门 \(A\) 曲明连sb模拟不会做,拖出去埋了算了 //quming #include<bits/stdc++.h> #define R register #define fi fi ...

  4. X86 下的SSDT HOOK

    目录 SSDTHOOK 1.SSDTHOOK 原理. 1.x32下的SSDT HOOK 2.SSDT HOOK代码 3.结果 4.总结 SSDTHOOK 1.SSDTHOOK 原理. x32下,直接获 ...

  5. mac切图

    1.按住command键位, 两只手指点击需要切的图 2.再在右边栅格化图层 3.选中需要剪切的图层.command+c 和command+n和 command+v OK 切整张图.先 option ...

  6. Android Studio 之 LiveData 的配合使用，底层数据变化，自动通知界面

    Android Studio 之 LiveData 的配合使用,底层数据变化,自动通知界面 viewModelWithLikeData.getLikeNumber().observe(this, ne ...

  7. SpringMVC(十六)：如何使用编程方式替代/WEB-INF/web.xml中的配置信息

    在构建springmvc+mybatis项目时,更常用的方式是采用web.xml来配置,而且一般情况下会在web.xml中使用ContextLoaderListener加载applicationCon ...

  8. linux下使用clamav排查病毒

    clamav wget http://www.clamav.net/downloads/production/clamav-0.102.0.tar.gz ### Installyum -y insta ...

  9. ubuntu16 修改gitlab root密码

    搭建了一个gitlab的git服务器,默认的管理员为root; 长时间不用root忘记了root密码: 我们可以在服务器上直接重置root的密码: 以下操作在终端下执行 #进入gitlab控制台 su ...

  10. -[UITableView copyWithZone:]: unrecognized selector sent to instance 0x7XXXXXX00

    -[UITableView copyWithZone:]: unrecognized selector sent to instance 0x7XXXXXX00 -[Class copyWithZon ...