display设置显示隐藏，transition过渡不起效果，采用opacity+visibility+dispaly解决问题

文章目录

一、场景如下，需要给一个弹出窗设置动画，淡入淡出效果。

在这里插入图片描述
当我们点击按钮123时，对应的下方弹出层展示在页面上，再次点击或点击文档其他处时，我们需要将弹出层隐藏（带有动画效果）。

二、直接采用display:none;display:block;过渡transition不起效果。

从个人理解角度上来说的话，transition对display不起效果的原因是因为，设置display后，浏览器相当于重新更新了，回流了，以至于过渡不起效果，那么我们改如何去巧妙地解决这个问题？

三、解决方案

<style>
// 在style中同时设置visibility、与opacity 
.isNone {
  visibility: visible;
  opacity: 1;
  transition: all 0.5s;
}
.isBlock {
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s;
}
</style>

3.1 visibility与opacity二者区别？

至于为什么要同时设置visibility与opacity，首先我们要知道两者的区别

属性	提示
opacity	透明度，占据文档位置并不是真的隐藏，设置为0时是可以触发事件的
visibility	visibility 属性规定元素是否可见，即使不可见的元素也会占据页面上的空间,不会触发事件

我们需要知道的是单独使用visibility、opacity都是不可取的，如果单独使用visibility，就会导致元素没有过渡效果，这个为什么我们可以这样去理解，将visibility的hidden看做0，visibility的visible看做1。而transition则是0-1过渡属性，而当transition开始运行时visibility的hidden由0走向0.01，那么这个时候dom元素就会立刻显示，因为visibility同样也将0.01看做成了1。

这个时候我们就需要去搭配opacity去使用了因为我们需要隐藏时不能触发dom事件，也同样需要隐藏是实现过渡效果。

3.2 如何不让其占据页面位置？

此时我们同样要思考一个问题，就是如何将已经隐藏好的dom元素，不让其占据页面上的位置呢？

    // 点击按钮方法
    isNone(e) {
      // 清除冒泡
      e.stopPropagation();
      // 获取ref属性，每次我们点击时我们立刻会将元素进行展示
      this.$refs["box"].style.display = "block";
      // 并且我们清除掉我们的定时器，防止多次点击，多次触发
      clearTimeout(this.time);
      // 设置为取反
      this.none = !this.none;
      // 如果对应的显示效果为false时，我们就将设置一个定时器，0.5秒之后设置display=none，此处对照上方transition所设置的时间s
      if (!this.none) {
        this.time = setTimeout(() => {
          this.$refs["box"].style.display = "none";
        }, 500);
      }
    },