html 清除animation,简单删除动画效果

前端入坑纪 24

工作不忙了，悠闲的时候，有想法也特别多。那就，双更再来一个！

老简单的效果

OK，first things first！项目链接

HTML 结构

• 秘密的甚笃

  删除

• 秘密的甚笃

  删除

• 秘密的甚笃

  删除

• 秘密的甚笃

  删除

• 秘密的甚笃

  删除

简单的一个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的浮动布局。有兴趣的小伙伴，可以研究下。

好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！