动效解决方案 Ani.js
2021-09-07 本文已影响0人
丸子小姐__不懂爱
一、AnijS 让你能够通过 if、on、do、to 等简单的命令更加直观地处理动效。同时ANijS也可以用来控制AnimateCSS动画。
二、功能介绍
一个无需编码即可提升网页设计的库，Ani.js 通过 if ，on，do， to 等关键词来进行对动画的控制，内置强大的事件系统，精确控制动画的进程。
三、安装
官网下载Anijs ， 下载后解压，拿到dist目录下的 anijs.js文件，为了操作dom，目录下的anijs-helper-dom-min.js也一并拿走
项目中引入
<script src="./lib/anijs.js"></script>
<script src="./lib/anijs-helper-dom-min.js"></script>
四、场景实践
1.手风琴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://anijs.github.io/lib/anicollection/anicollection.css" />
<title>Document</title>
<style>
.accordion {
margin: 20px auto;
width: 96%;
border-radius: 6px;
overflow: hidden;
}
.accordion .item .heading {
height: 50px;
line-height: 50px;
font-size: 16px;
color: #fff;
padding-left: 15px;
box-sizing: border-box;
}
.accordion .item .content {
padding: 0 20px;
background: #eee;
font-size: 14px;
height: 0;
overflow: hidden;
color: #7f8c8d;
transition: all .3s ease-in-out;
}
.accordion .item.open .content {
height: 100px;
padding: 20px;
}
.color01 {
background: burlywood;
}
.color02 {
background: rgb(245, 110, 20);
}
.color03 {
background: rgb(25, 153, 238);
}
.color04 {
background: rgb(250, 17, 238);
}
</style>
</head>
<body>
<div class="accordion"
data-anijs="if: click, on: .heading, do: $removeClass open, to: .open;
if: click, on: .heading, do: $toggleClass open, to: $parent target"
>
<div class="item">
<div class="heading color01">
<span>面板一</span>
</div>
<div class="content">
这里显示面板一的内容
</div>
</div>
<div class="item">
<div class="heading color02">
<span>面板一</span>
</div>
<div class="content">
这里显示面板一的内容
</div>
</div>
<div class="item">
<div class="heading color03">
<span>面板一</span>
</div>
<div class="content">
这里显示面板一的内容
</div>
</div>
<div class="item">
<div class="heading color04">
<span>面板一</span>
</div>
<div class="content">
这里显示面板一的内容
</div>
</div>
</div>
<script src="./lib/anijs.js"></script>
<script src="./lib/anijs-helper-dom-min.js"></script>
</body>
</html>
2.滚动加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./lib/animate.css">
<style>
.wrap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.item {
width: 45vw;
height: 45vw;
background: pink;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="item"
data-anijs= "if: scroll, on: window, do: animated fadeInUp , before: scrollReveal">
</div>
<!-- ......此处省略无数个item -->
<div class="item"
data-anijs= "if: scroll, on: window, do: animated fadeInUp , before: scrollReveal">
</div>
</div>
<script src="./lib/anijs.js"></script>
<script src="./lib/anijs-helper-scrollreveal-min.js"></script>
</body>
</html>
3.消息反馈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./lib/animate.css">
<style>
.login {
margin: 50px auto;
width: 90%;
height: 260px;
background: skyblue;
text-align: center;
border-radius: 10px;
}
.login .name , .login .password {
display: flex;
justify-content: center;
align-items: center;
}
.login h3 {
padding: 15px 0;
}
.login .wrap {
height: 40px;
}
.login span {
margin-right: 20px;
}
.login input {
height: 28px;
border: none;
outline: none;
}
.tips {
margin: 0;
color: red;
display: none;
}
.showTips {
display: block!important;
}
button {
position: relative;
top: 20px;
width: 90px;
height: 28px;
border: none;
outline: none;
}
</style>
</head>
<body>
<div class="login">
<h3>登录</h3>
<div class="name">
<span>账号:</span>
<div class="wrap">
<input type="text">
</div>
</div>
<div class="password">
<span>密码:</span>
<div class="wrap">
<input type="text">
</div>
</div>
<p class="tips">密码格式错误，请检查！</p>
<button
data-anijs="if: click, do: animated shake, to: .login;
if: click, do: $toggleClass showTips, to: .tips"
>登录</button>
</div>
<script src="./lib/anijs.js"></script>
<script src="./lib/anijs-helper-dom-min.js"></script>
</body>
</html>
4.侧边栏滑出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./lib/animate.css">
<style>
nav#slide-menu {
position: fixed;
top: 0;
left: -100px;
bottom: 0;
display: block;
float: left;
width: 100%;
max-width: 180px;
height: 100%;
background: rgb(55, 56, 56);
transition: all 300ms;
}
.container.menu-active nav#slide-menu {
left: 0px;
}
.container.menu-active nav#slide-menu ul {
left: 0px;
opacity: 1;
}
#content {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 60px;
overflow: scroll;
background: #fcfeff;
border-radius: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-shadow: -3px 0 6px #4a5562;
transition: all 220ms;
}
div#content div.menu-trigger {
position: fixed;
top: 10px;
left: 10px;
width: 36px;
height: 36px;
background: #dfe5eb;
cursor: pointer;
border-radius: 5px;
-moz-transition: all 220ms;
-webkit-transition: all 220ms;
transition: all 220ms;
}
.container.menu-active div#content {
left: 180px;
border-radius: 7px 0 0 7px;
}
.container.menu-active div#content .menu-trigger {
left: 190px;
}
#content .menu-trigger {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
padding: 4px 0;
box-sizing: border-box;
}
#content .menu-trigger span {
margin: auto;
display: block;
width: 60%;
height: 4px;
background: slategray;
}
</style>
</head>
<body>
<div class="container">
<nav id="slide-menu"></nav>
<div id="content">
<div class="menu-trigger"
data-anijs="if: click, do: $toggleClass menu-active, to: .container"
>
<span></span>
<span></span>
<span></span>
</div>
<h2>自古英雄出少年</h2>
</div>
</div>
<script src="./lib/anijs.js"></script>
<script src="./lib/anijs-helper-dom-min.js"></script>
</body>
</html>
