Animation CSS3: display + opacity

前端 未结 15 2746
轮回少年
轮回少年 2020-11-27 11:42

I have got a problem with a CSS3 animation.

.child {
    opacity: 0;
    display: none;

    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transit         


        
相关标签:
15条回答
  • 2020-11-27 11:52

    To have animation on both ways onHoverIn/Out I did this solution. Hope it will help to someone

    @keyframes fadeOutFromBlock {
      0% {
        position: relative;
        opacity: 1;
        transform: translateX(0);
      }
    
      90% {
        position: relative;
        opacity: 0;
        transform: translateX(0);
      }
    
      100% {
        position: absolute;
        opacity: 0;
        transform: translateX(-999px);
      }
    }
    
    @keyframes fadeInFromNone {
      0% {
        position: absolute;
        opacity: 0;
        transform: translateX(-999px);
      }
    
      1% {
        position: relative;
        opacity: 0;
        transform: translateX(0);
      }
    
      100% {
        position: relative;
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    .drafts-content {
      position: relative;
      opacity: 1;
      transform: translateX(0);
      animation: fadeInFromNone 1s ease-in;
      will-change: opacity, transform;
    
      &.hide-drafts {
        position: absolute;
        opacity: 0;
        transform: translateX(-999px);
        animation: fadeOutFromBlock 0.5s ease-out;
        will-change: opacity, transform;
      }
    }
    
    0 讨论(0)
  • 2020-11-27 11:56

    If possible - use visibility instead of display

    For instance:

    .child {
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s, visibility 0.3s;
    }
    
    .parent:hover .child {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.3s, visibility 0.3s;
    }
    
    0 讨论(0)
  • 2020-11-27 12:00

    I used this to achieve it. They fade on hover but take no space when hidden, perfect!

    .child {
        height: 0px;
        opacity: 0;
        visibility: hidden;
        transition: all .5s ease-in-out;
    }
    
    .parent:hover .child {
        height: auto;
        opacity: 1;
        visibility: visible;
    }
    
    0 讨论(0)
  • 2020-11-27 12:00

    I changed a bit but the result is beautiful.

    .child {
        width: 0px;
        height: 0px;
        opacity: 0;
    }
    
    .parent:hover child {
        width: 150px;
        height: 300px;
        opacity: .9;
    }
    

    Thank you to everyone.

    0 讨论(0)
  • 2020-11-27 12:01

    You can do with CSS animations:

    0% display:none ; opacity: 0;
    1% display: block ; opacity: 0;
    100% display: block ; opacity: 1;
    
    0 讨论(0)
  • 2020-11-27 12:05

    display: is not transitionable. You'll probably need to use jQuery to do what you want to do.

    0 讨论(0)
提交回复
热议问题