transition与visibility

一. visibility 属性规定元素是否可见。

1. visibility:visible // 元素是可见的。
2. visibility:hidden // 元素不可见

二,使用visibility的优点

1. 因为 transition与visibility 可以搭配使用;
2. visibility 可以应用transition的效果, 但是 display:none 会破坏 transition的效果

三. 例子:

使用: display:none;

使用: visibility:hidden; 有过渡效果

代码:

  <div class="content">
    <span>visibility:hidden;</span>
    <div class="box2"></div>
  </div>

  <style>
    .content{
       200px;
      height: 200px;
      /* background: pink; */
      margin: 200px auto;
      position: relative;
    }
    .content .box2{
       100%;
      height: 100%;
      /* background: green; */
      background: url(https://z3.ax1x.com/2021/05/26/2CSZ2q.jpg)no-repeat;
      background-size: cover;
      transition:all 0.5s linear;
      visibility:hidden;
      transition-delay:0s; /* 延迟效果 */
      opacity: 0;
    }
    
    .content:hover .box2{ 
      visibility:visible;
      opacity: 1;
    }
  </style>