文章目录
- 一、场景如下，需要给一个弹出窗设置动画，淡入淡出效果。
- 二、直接采用display:none;display:block;过渡transition不起效果。
- 三、解决方案
- 3.1 visibility与opacity二者区别？
- 3.2 如何不让其占据页面位置？
一、场景如下，需要给一个弹出窗设置动画，淡入淡出效果。
当我们点击按钮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);
}
},
对照jsx render函数来讲解一下运行的过程
click按钮 → 属性立即设置为block → 运算过程 → data值变更(class属性进行变更) → 对应transition过渡效果 → 0.5s后调用setTimeout函数执行display=none；
