css动画：文字向上移动并逐渐消失

背景今天有个同学请教我一个css效果怎样实现，据他描述是点击后一个文字上浮然后慢慢消失。就下面这样子：我第一时间想到的是css动画，以前在w3cschool粗略过了一遍css教程，记得有这样的功能。其实学习就是这样，有些知识只需要了解下，没必要完全掌握，知道有这个东西，然后在要用到的时候启动cv大法。解决于是我迅速上w3cschool找了下，很快找到相关内容，是用最基本的from to语法，就是从

姑老爷呀

4210人浏览 · 2022-05-24 13:55:51

姑老爷呀 · 2022-05-24 13:55:51 发布

背景

今天有个同学请教我一个css效果怎样实现，据他描述是点击后一个文字上浮然后慢慢消失。就下面这样子：

图片.png

我第一时间想到的是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>

效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OHT8qwhc-1653371737327)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/472ca530bd5d408eb2962fc61076af32~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

拓展

但是我发现个问题，人家是点击页面里的某个按钮，而我这个是页面刷新进入后才发生效果。这可不行。于是我把关键代码放到一个样式类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>

再次测试效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-riFnFnT9-1653371737328)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f0f9067f1e294fcb9918700b3dbdbb4e~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

测试结果可以，不过点快好像还有点小bug，感觉这种实现方式还是有点怪，应该有完美的方式达到动画完成就执行另外一个动作，用addClass和click方法的回调函数测试了很久发现并没有效果。

其实关于css动画有一个叫做Animate.css（官网：animate.style/）的封装了大量的动画，直接调用即可，没必要重复搞车轮子。以上只当的探索学习了解css。