前端入坑纪 24
工作不忙了，悠闲的时候，有想法也特别多。那就，双更再来一个！
老简单的效果
OK，first things first！项目链接
HTML 结构
<ul id="uls">
<li class="clear">
<p>
秘密的甚笃
</p>
<a href="javascript:;">
删除
</a>
</li>
<li class="clear">
<p>
秘密的甚笃
</p>
<a href="javascript:;">
删除
</a>
</li>
<li class="clear">
<p>
秘密的甚笃
</p>
<a href="javascript:;">
删除
</a>
</li>
<li class="clear">
<p>
秘密的甚笃
</p>
<a href="javascript:;">
删除
</a>
</li>
<li class="clear">
<p>
秘密的甚笃
</p>
<a href="javascript:;">
删除
</a>
</li>
</ul>
简单的一个ul ，li 里面放了一个p和一个按钮的a，各自左右浮动
CSS 结构
body {
background: #fff;
}
* {
margin: 0;
padding: 0
}
a {
color: #333;
text-decoration: none;
}
img {
border: none;
}
.clear::after {
content: "";
display: table;
clear: both
}
ul,
li {
list-style: none;
}
#uls {
margin: 1rem;
}
#uls li {
height: 40px;
padding: 12px 0;
border: 1px solid skyblue;
color: #333;
margin-bottom: 12px;
border-radius: 2px;
transition: all .7s linear;
overflow: hidden;
}
li p {
line-height: 40px;
float: left;
text-align: left;
text-indent: 2rem;
width: 70%;
}
li a {
display: block;
font-size: 13px;
border-radius: 5px;
height: 30px;
line-height: 30px;
margin-top: 5px;
margin-right: 3%;
background-color: skyblue;
color: #fff;
float: right;
width: 60px;
text-align: center;
}
/*动画效果 摘选自animate.css*/
@-webkit-keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
@keyframes flipOutX {
from {
-webkit-transform: perspective(400px);
transform: perspective(400px);
}
30% {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
opacity: 1;
}
to {
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
opacity: 0;
}
}
.flipOutX {
-webkit-animation-name: flipOutX;
animation-name: flipOutX;
animation-duration: .7s;
animation-timing-function: linear;
-webkit-animation-duration: .7s;
animation-fill-mode: forwards;
/*规定对象动画时间之外的状态*/
-webkit-animation-fill-mode: forwards
}
动画效果的css 是来源于 animate.css ， 里面有很多常用的动画效果。至于ul 和 li 的样式没什么特别奇葩的地方，就是常见的布局，就不赘述了。
PS：小伙伴反应最后删除过于生硬，所以添加了animation-fill-mode，控制动画完结后保持最后帧的效果，并且同时让li高度也过渡动画到零。这样就没有先前那么突兀的效果了！
JS 结构
var oul = document.getElementById("uls");
var olis = oul.getElementsByTagName("li");
for (var i = 0; i < olis.length; i++) {
// 给每个li里的a添加事件
olis[i].getElementsByTagName("a")[0].onclick = function() {
// 获取当前点击的a的父级，也就是它的爸爸li
var theLi = this.parentNode;
// 给这个li添加动画的class，这样就会出现动画的效果了
theLi.className = "flipOutX";
// 280ms后改变li的高度为0，包括边框和margin
setTimeout(function() {
theLi.style.cssText = "height:0;padding:0;border-width:0;margin:0";
}, 280);
// 动画时间为0.7s+280ms，所以直接设置1s后触发删除li
setTimeout(function() {
oul.removeChild(theLi)
}, 1000)
}
}
都是比较简单的逻辑，这个效果案例比较综合，有css的动画，有js的事件，有html的浮动布局。有兴趣的小伙伴，可以研究下。
好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！
