我知道给弹框css加animation属性,animation绑定一个keyframes规则,规则里设置弹框的透明度。
但是打开可以淡入了,可是如何在关闭时淡出呢?
这个逆向操作怎么处理?
如何为弹框添加淡入淡出效果?
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
2条回答 默认 最新
关注 参考与:https://blog.csdn.net/codeTnt/article/details/81030077
已经亲测可用,可以直接赋值粘贴用。如果有帮助请**采纳**!谢谢。<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>toast</title> </head> <style media="screen"> @keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} } @-webkit-keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} } @-moz-keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} } @-o-keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} } @-ms-keyframes fadeIn { 0% {opacity: 0} 100% {opacity: 1} } @keyframes fadeOut { 0% {opacity: 1} 100% {opacity: 0} } @-webkit-keyframes fadeOut { 0% {opacity: 1} 100% {opacity: 0} } @-moz-keyframes fadeOut { 0% {opacity: 1} 100% {opacity: 0} } @-o-keyframes fadeOut { 0% {opacity: 1} 100% {opacity: 0} } @-ms-keyframes fadeOut { 0% {opacity: 1} 100% {opacity: 0} } #toast{ background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 14px; line-height: 1; padding:10px; border-radius: 3px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); z-index: 9999; } .hide{ display: none; } .fadeOut{ animation: fadeOut .5s; } .fadeIn{ animation:fadeIn .5s; } </style> <body></body> </html> <script> var toast = function(params){ var el = document.createElement("div"); el.setAttribute("id","toast"); el.innerHTML = params.message; document.body.appendChild(el); el.classList.add("fadeIn"); setTimeout(function(){ el.classList.remove("fadeIn"); el.classList.add("fadeOut"); el.addEventListener("animationend", function(){ el.classList.add("hide"); }); },params.time); }; //使用 toast({ message:"提交成功", time:1500 }); /*------------------------ author:codeTnt date:2018/7/13 -------------------------*/ </script>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥20 删除和修改功能无法调用
- ¥15 kafka topic 所有分副本数修改
- ¥15 小程序中fit格式等运动数据文件怎样实现可视化?(包含心率信息))
- ¥15 如何利用mmdetection3d中的get_flops.py文件计算fcos3d方法的flops?
- ¥40 串口调试助手打开串口后,keil5的代码就停止了
- ¥15 电脑最近经常蓝屏,求大家看看哪的问题
- ¥60 高价有偿求java辅导。工程量较大,价格你定,联系确定辅导后将采纳你的答案。希望能给出完整详细代码,并能解释回答我关于代码的疑问疑问,代码要求如下,联系我会发文档
- ¥50 C++五子棋AI程序编写
- ¥30 求安卓设备利用一个typeC接口,同时实现向pc一边投屏一边上传数据的解决方案。
- ¥15 SQL Server analysis services 服务安装失败