本文已参与「新人创作礼」活动,一起开启掘金创作之路。
背景
今天有个同学请教我一个css效果怎样实现,据他描述是点击后一个文字上浮然后慢慢消失。就下面这样子:
我第一时间想到的是css动画,以前在w3cschool粗略过了一遍css教程,记得有这样的功能。其实学习就是这样,有些知识只需要了解下,没必要完全掌握,知道有这个东西,然后在要用到的时候启动cv大法。
解决
于是我迅速上w3cschool找了下,很快找到相关内容,是用最基本的from to
语法,就是从一个样式到另外一个样式,浏览器会自动在规定时间内做过渡处理。
@keyframes mymove {
from {样式1}
to {样式2}
}
于是捣鼓了下很快实现了。
代码
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
color:red;
height: 200px;
animation: mymove 1s;
position:absolute;
opacity:0;
}
@keyframes mymove {
from {top:100px;opacity:100;}
to {top:50px;opacity:0;}
}
</style>
</head>
<body>
<div id="myDIV">+1</div>
</body>
</html>
效果如下
拓展
但是我发现个问题,人家是点击页面里的某个按钮,而我这个是页面刷新进入后才发生效果。这可不行。于是我把关键代码放到一个样式类plus1中,需要加1的时候就设置好样式,执行完就去移除样式。说干就干,我引入jQuery,放一个div,然后让它接收点击事件,执行下面代码:
$("#myDIV").addClass("plus1").removeClass("plus1");
然而并没有反应,我猜测是刚设置样式就立刻移除了,所以并不会产生效果。那么得加个延时才行。
$(".toupiao").click(function(){
$("#myDIV").addClass("plus1");
setTimeout( function(){$("#myDIV").removeClass("plus1");}, 1000);
});
注意后面的延时时间1000ms,和动画完成的时间要一致,意思在动画执行完成后再移除样式。完整代码如下:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.11.2/jquery.min.js"></script>
<style>
#myDIV {
color:red;
position:absolute;
opacity:0;
}
.plus1{ animation: mymove 1s;}
.toupiao{margin-top:150px; border:1px solid red; padding:10px; width:100px; text-align:center;}
@keyframes mymove {
from {top:100px;opacity:100;}
to {top:0px;opacity:0;}
}
</style>
</head>
<body>
<div id="myDIV">+1</div>
<div class="toupiao">点赞</div>
</body>
<script>
$(".toupiao").click(function(){
$("#myDIV").addClass("plus1");
setTimeout( function(){$("#myDIV").removeClass("plus1");}, 1000);
});
</script>
</html>
再次测试效果
测试结果可以,不过点快好像还有点小bug,感觉这种实现方式还是有点怪,应该有完美的方式达到动画完成就执行另外一个动作,用addClass和click方法的回调函数测试了很久发现并没有效果。
其实关于css动画有一个叫做Animate.css(官网:animate.style/)的封装了大量的动画,直接调用即可,没必要重复搞车轮子。以上只当的探索学习了解css。