add:okAnimate

2019-11-02 19:03:31 +08:00 · 2019-11-02 19:03:31 +08:00 · 46e77d5bd8
parent c7f91e82b4
commit 46e77d5bd8
4 changed files with 3653 additions and 2 deletions
--- a/css/okadmin.animate.css
+++ b/css/okadmin.animate.css
--- a/css/oksub.css
+++ b/css/oksub.css
@ -1,5 +1,6 @@
@import "../css/common.css";
@import "../lib/layui/css/layui.css";
+@import "okadmin.animate.css";

 /**控制台样式*/
 .console .map-body{height:360px}
--- a/data/navs.json
+++ b/data/navs.json
@ -434,8 +434,8 @@
                "href": "pages/tripartite/okSweetAlert2.html"
            },
            {
-                "title": "Animate.css",
-                "href": "https://daneden.github.io/animate.css"
+                "title": "okAnimate",
+                "href": "pages/tripartite/okAnimate.html"
            }
        ]
    }
--- a/pages/tripartite/okAnimate.html
+++ b/pages/tripartite/okAnimate.html
@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>okAnimate</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <link rel="stylesheet" href="../../css/oksub.css">
+</head>
+<body>
+    <div class="ok-body">
+        <blockquote class="layui-elem-quote">
+            <p>Animate.css 一款强大的预设css3动画库</p>
+        </blockquote>
+        <pre>
+// Step1
+引入：css/oksub.css
+// Step2
+<span class="ok-anim shake">文字特效</span>>
+        </pre>
+        <button type="button" class="layui-btn" id="try">试一下</button>
+    </div>
+    <!--js逻辑-->
+    <script src="../../lib/layui/layui.js"></script>
+    <script>
+        layui.use(["code"], function () {
+            let code = layui.code;
+            let $ = layui.jquery;
+
+            code({
+                elem: "pre",
+                title: "代码示例",
+                encode: true
+            });
+
+            $("#try").click(function () {
+                $(this).addClass("ok-anim shake");
+            });
+        });
+    </script>
+</body>
+</html>