css snippets

[fi3ework]

• 解决 transition 对 display 无效，

  • 使用 visibility: visible 和 visibility: hidden 代替 display: block 和 display: none

  <div class="wrapper">
    <h3>title</h3>
    <p>Item</p>
  </div>

  .wrapper{
    position: relative;
  }
  
  .wrapper p {
    position: absolute;
    transition: all 0.3s ease-in 0s;
    visibility: hidden;
    opacity: 0;
  }
  
  .wrapper:hover p {
    visibility: visible;
    opacity: 1;
  }

  • 不使用 transition，而是使用 animation

  <div class="wrapper">
    <h3>title</h3>
    <p>Item</p>
  </div>

  @keyframes fadeIn {
      from { opacity: 0; }
        to { opacity: 1; }
  }
  
  .wrapper p {
    position: relative;
    display: none;
  }
  
  .wrapper:hover p {
    position: absolute;
    display: block;
    animation: fadeIn 1s;
  }