《layui宇宙版教程》:CSS3动画类

《Layui宇宙版教程》提供2000人的QQ群进行交流学习,QQ群号:1046961650,或通过手机QQ扫描二维码进入:

《layui宇宙版教程》:CSS3动画类_第1张图片

 

1.6 CSS3动画类

在以实用的前提下,Layui并没有内置过多花俏的动画。而他们同样在Layui的许多交互元素中发挥着重要的作用。Layui的动画全部采用CSS3实现,因此不支持ie8和部分不支持ie9(即在ie8/9中无动画效果)。

1.6.1 使用方式

动画的使用非常简单,直接对元素赋值动画特定的class类名即可。

测试代码如下:

DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title>title>

       <link rel="stylesheet" href="layui/css/layui.css">

       <script src="layui/layui.all.js">script>

    head>

    <body>

       <div class="layui-row">

           <div class="layui-col-md12">

              其中 layui-anim 是必须的,后面跟着的即是不同的动画类

              <br />

              <div class="layui-anim layui-anim-up">a<br />b<br />c<br />div>

              循环动画,追加:layui-anim-loop

              <br />

              <div class="layui-anim layui-anim-up layui-anim-loop">1<br />2<br />3<br />div>

           div>

       div>

    body>

html>

 

1.6.2 内置CSS3动画一览表

    测试代码如下:

DOCTYPE html>

<html>

    <head>

       <meta charset="utf-8">

       <title>title>

       <link rel="stylesheet" href="layui/css/layui.css">

       <script src="layui/layui.all.js">script>

       <script src="js/jquery3.5.1.js">script>

    head>

    <body>

       <div class="layui-row">

           <div class="layui-col-md12">

              <div id="div1" class="layui-anim layui-anim-up" style="background-color: red;">layui-anim-up从最底部往上滑入div>

              <br />

              <div id="div2" class="layui-anim layui-anim-upbit" style="background-color: green;">layui-anim-upbit微微往上滑入div>

              <br />

              <div id="div3" class="layui-anim layui-anim-scale" style="background-color: blue;">layui-anim-scale平滑放大div>

              <br />

              <div id="div4" class="layui-anim layui-anim-scaleSpring" style="background-color: red;">layui-anim-scaleSpring弹簧式放大div>

              <br />

              <div id="div5" class="layui-anim layui-anim-fadein" style="background-color: green;">layui-anim-fadein渐现div>

              <br />

              <div id="div6" class="layui-anim layui-anim-fadeout" style="background-color: blue;">layui-anim-fadeout渐隐div>

              <br />

              <div id="div7" class="layui-anim layui-anim-rotate" style="background-color: red;">layui-anim-rotate360度旋转div>

              <br />

              <div id="div8" class="layui-anim layui-anim-up layui-anim-loop" style="background-color: green;">追加:layui-anim-loop循环动画div>

           div>

       div>

       <script>

           $("#div1").click(function() {

              var othis = $(this);

              $(othis).removeClass("layui-anim-up");

              setTimeout(function() {

                  $(othis).addClass("layui-anim-up");

              });

           });

           $("#div2").click(function() {

              var othis = $(this);

              $(othis).removeClass("layui-anim-upbit");

              setTimeout(function() {

                  $(othis).addClass("layui-anim-upbit");

              });

           });

           $("#div3").click(function() {

              var othis = $(this);

              $(othis).removeClass("layui-anim-scale");

              setTimeout(function() {

                  $(othis).addClass("layui-anim-scale");

              });

           });

           $("#div4").click(function() {

              var othis = $(this);

              $(othis).removeClass("layui-anim-scaleSpring");

              setTimeout(function() {

                  $(othis).addClass("layui-anim-scaleSpring");

              });

           });

           $("#div5").click(function() {

              var othis = $(this);

              $(othis).removeClass("layui-anim-fadein");

              setTimeout(function() {

                  $(othis).addClass("layui-anim-fadein");

              });

           });

           $("#div6").click(function() {

              var othis = $(this);

              $(othis).removeClass("layui-anim-fadeout");

              setTimeout(function() {

                  $(othis).addClass("layui-anim-fadeout");

              });

           });

           $("#div7").click(function() {

              var othis = $(this);

              $(othis).removeClass("layui-anim-rotate");

              setTimeout(function() {

                  $(othis).addClass("layui-anim-rotate");

              });

           });

           $("#div8").click(function() {

              var othis = $(this);

 

              if ($(othis).hasClass("layui-anim-loop")) {

                  $(othis).removeClass("layui-anim-loop");

                  return;

              }

 

              $(othis).removeClass("layui-anim-up");

 

              setTimeout(function() {

                  $(othis).addClass("layui-anim-up");

                  $(othis).addClass("layui-anim-loop");

              });

           });

       script>

    body>

html>

你可能感兴趣的:(Layui宇宙版教程)