如何实现一个盒子看起来缓慢消失切换到另一个页面的效果？

前言：

在项目中，我们常会用到页面切换，如果我们把上一个页面display:none;然后让下一个display:block;这样难免会显得比较生硬，那么如何实现缓缓切换到下一个页面的效果呢？

 

实现方法：

1、首先给盒子加过度属性。

 -webkit-transition: 1s ease-out;
 transition: 1s ease-out；

2、然后待切换的时候，再添加一个类，属性如下：

opacity: 0;
pointer-events: none；

  这样既可实现缓慢切换到透明度为0的样子，而且这个盒子本身再加上 pointer-events: none；之后也无法点击；这样就类似于这个盒子彻底在dom上面消失了。

 或者边放大边消失。（当然，如果你想消失后黑漆漆的，你可以把body设置成相应的黑色）

 transform: scale(1.32);
 opacity: 0;
 pointer-events: none；