sun_qqq 2018-11-01 07:41 采纳率: 55.6%
浏览 2528
已采纳

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

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

  • 写回答

2条回答

  • 专家-郭老师 Java领域新星创作者 2018-11-01 09: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条)

报告相同问题？

悬赏问题

  • ¥15 r语言蛋白组学相关问题
  • ¥15 Python时间序列如何拟合疏系数模型
  • ¥15 求学软件的前人们指明方向🥺
  • ¥50 如何增强飞上天的树莓派的热点信号强度，以使得笔记本可以在地面实现远程桌面连接
  • ¥20 双层网络上信息-疾病传播
  • ¥50 paddlepaddle pinn
  • ¥20 idea运行测试代码报错问题
  • ¥15 网络监控：网络故障告警通知
  • ¥15 django项目运行报编码错误
  • ¥15 STM32驱动继电器