如何为弹框添加淡入淡出效果？

我知道给弹框css加animation属性，animation绑定一个keyframes规则，规则里设置弹框的透明度。
但是打开可以淡入了，可是如何在关闭时淡出呢？
这个逆向操作怎么处理？

写回答
好问题 0 提建议
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

2条回答默认最新

叫兽-郭老师 Java领域新星创作者 2018-11-01 01:26

关注

参考与：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>

展开全部

本回答被题主选为最佳回答 , 对您是否有帮助呢?

查看更多回答(1条)

编辑

预览

报告相同问题？

关注问题

【淡入淡出型菜单】为什么执行不了？ chrome css html5 javascript
2019-01-17 03:00

回答 1 已采纳 offsetHeight,拼写错误
Android 如何修改并输出一个首尾有淡入淡出效果的音频文件？
2016-07-21 22:09

回答 2 已采纳过去很久的了，关闭问题了。
jQuery的淡入淡出问题 jquery
2022-08-04 08:50

回答 2 已采纳 fade-out 结束的时候 display:none,而不是visibility:hidden, 或者opacity:0, display:none 相当于删除了元素，原有的位置上不占据空间，自然会
vue+slot+transition+v-model实现淡入淡出弹窗效果
2019-06-14 10:00

qq_42750608的博客 //淡入淡出的效果 .v-enter, .v-leave-to opacity: 0 .v-enter-active, .v-leave-active transition: opacity .5s 3)在app.vue中使用 ()">出现弹窗 <dialog-one v-if="ifShow" v-model="ifShow">...
unity canvas group 改变alpha实现场景切换淡入淡出时，显示效果不完整。 unity
2022-08-23 09:31

回答 2 已采纳看你的描述应该是animation里面有修改透明度的动画帧，和canvas group冲突了
android 如何修改音频文件实现播放淡入淡出效果
2016-07-18 17:43

回答 3 已采纳你可以到关闭的时候，渐渐把声音设置小点就行了，我记得可以设置
php回显到html与jquery淡入淡出效果 jquery php
2014-04-21 08:33

回答 3 已采纳 The JavaScript interaction happens entirely client-side, after the PHP is done. So essentially yo
React Native 自定义实现自下而上淡入淡出弹框
2020-09-16 03:50

简青子的博客组件说明：实现模块拖动效果、拖动排序等，包含实现动画和效果实现；自定义数据：删除，添加，或者重新排序数据，可以通过修改data来达到目的；注意： data 中的数据必须要有key，而且必须唯一。安装组件 ...
MFC 实现启动画面淡入淡出的问题 c++ mfc
2016-03-04 22:49

回答 6 已采纳不用那么麻烦，最简单的做法是定时器循环调用 SetLayeredWindowAttributes http://baike.baidu.com/link?url=D8_84M_5ZKBL4eb
安卓开发问题怎么写淡入淡出的动画 android
2016-06-14 02:04

回答 6 已采纳 public class MainActivity extends Activity implements View.OnClickListener{ private TextView[] tv;
小程序怎么实现一条文字循环的淡入淡出的动画前端动画小程序有问必答
2021-11-30 07:04

回答 3 已采纳用css3动画搞下就好了，设置下opacity, 代码片段： http
Android——悬浮窗+侧边弹框+淡入淡出+背景shape+SeekBar调节手机亮度
2019-10-03 21:46

a5511596的博客 http://blog.csdn.net/guolin_blog/article/details/8689140 http://blog.csdn.net/stevenhu_223/article/details/8504058 侧边弹框+淡入淡出效果实现：靠PopupWindow的setAnimationStyle(动画资源)方法设置动画...
使用JS中的定时器实现块元素背景颜色淡入和淡出的效果
2020-04-15 17:33

我才是丶丶丶天使的博客效果展示： HTML代码如下： <body> <div id="div1"></div> </body> CSS代码如下： #div1{ width: 200px; height: 200px; background-color: red; /* 兼容ie6 */ /*...
css3中制作淡出淡入动画
2019-09-17 04:11

Perfect珈蓝的博客大部分网页对于一些信息的提醒都是使用了一个淡出淡入的显示效果。本人在开发中使用定时器实现淡出淡入的效果时遇到了一个严重问题，在一些浏览器上清楚定时器时有时候无效果，但使用debugger跟踪又没有事，最后实现...
弹框消失效果
2015-11-11 08:20

通过访问提供的参考示例网址（http://www.jq22.com/jquery-info4606），开发者可以找到多种不同的弹框消失动画效果，例如淡入淡出、滑动、缩放等，这些效果可以帮助提升网站的交互性和美观性。在实际应用中，使用...
仿支付宝支付弹框效果
2017-07-10 14:39

- **动画效果**：为了增强用户体验，可以添加进入和退出的动画，例如淡入淡出、平滑滑动等。 - **触摸拦截**：为了防止用户在Dialog显示时误触到应用的其他部分，可以设置Dialog的背景透明度并捕获触摸事件，阻止...
vue3+elementui-plus实现淡入动画收缩效果
2024-06-12 03:16

青莳吖的博客 vue3+elementui-plus实现动态收缩效果，点击收缩会有一个淡入收起的动画效果。
没有解决我的问题, 去提问

码龄粉丝数原力等级 --

如何为弹框添加淡入淡出效果？

2条回答默认最新

码龄粉丝数原力等级 --

如何为弹框添加淡入淡出效果？

2条回答 默认 最新

2条回答默认最新