애니메이션 CSS3 : 디스플레이 + 불투명도

CSS3 애니메이션에 문제가 있습니다.

.child {
    opacity: 0;
    display: none;

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

.parent:hover .child {
    opacity: 0.9;
    display: block;
}

이 코드는 변경 사항을 제거하는 경우에만 작동합니다 display.

호버 직후 디스플레이를 변경하고 싶지만 전환을 사용하여 불투명도를 변경해야합니다.

Michaels 답변을 기반으로 이것은 사용할 실제 CSS 코드입니다.

.parent:hover .child
{
    display: block;

    -webkit-animation: fadeInFromNone 0.5s ease-out;
    -moz-animation: fadeInFromNone 0.5s ease-out;
    -o-animation: fadeInFromNone 0.5s ease-out;
    animation: fadeInFromNone 0.5s ease-out;
}

@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

CSS 애니메이션으로 할 수 있습니다.

0% display:none ; opacity: 0;
1% display: block ; opacity: 0;
100% display: block ; opacity: 1;

가능하면 visibility대신 사용하십시오.display

예를 들면 :

.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;
}

이 해결 방법은 다음과 같습니다.

1. "키 프레임"정의 :

   @-webkit-keyframes fadeIn { 
     0% { opacity: 0; }
     20% { opacity: 0; }
     40% { opacity: 0.3; }
     60% { opacity: 0.5; }
     80% { opacity: 0.9; }
     100% { opacity: 1; }
   }
   
   @keyframes fadeIn {
     0% { opacity: 0; }
     20% { opacity: 0; }
     40% { opacity: 0.3; }
     60% { opacity: 0.5; }
     80% { opacity: 0.9; }
     100% { opacity: 1; }
   }
   

2. "호버"에이 "키 프레임"을 사용하십시오.

   div a span { 
     display: none;
   }
   
   div a:hover span {
     display: block;
   
     -webkit-animation-name: fadeIn;
     -webkit-animation-duration: 1s;
     animation-name: fadeIn;
     animation-duration: 1s;
   }
   

나는 그것을 달성하기 위해 이것을 사용했습니다. 호버링하면 사라지지만 숨겨지면 공간을 차지하지 않습니다. 완벽합니다!

.child {
    height: 0px;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease-in-out;
}

.parent:hover .child {
    height: auto;
    opacity: 1;
    visibility: visible;
}

조금 변했지만 결과는 아름답습니다.

.child {
    width: 0px;
    height: 0px;
    opacity: 0;
}

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

모두에게 감사합니다.

포인터 이벤트를 사용하여이를 수행하는 또 다른 좋은 방법이 있습니다.

.child {
    opacity: 0;
    pointer-events: none;

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

.parent:hover .child {
    opacity: 0.9;
    pointer-events: all;
}

안타깝게도 IE10 이하에서는 지원되지 않습니다.

나는 같은 문제가 있었다. @MichaelMullany와 @Chris가 제안한대로 전환 대신 애니메이션을 사용해 보았지만 "-moz"및 "-o"접두사를 복사하여 붙여 넣은 경우에도 웹킷 브라우저에서만 작동했습니다.

visibility대신을 사용하여 문제를 해결할 수있었습니다 display. 이것은 내 자식 요소가 position: absolute이므로 문서 흐름에 영향을 미치지 않기 때문에 저에게 효과적입니다 . 다른 사람들에게도 효과가있을 수 있습니다.

이것은 내 솔루션을 사용하는 원본 코드의 모습입니다.

.child {
    position: absolute;
    opacity: 0;
    visibility: hidden;

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

.parent:hover .child {
    position: relative;
    opacity: 0.9;
    visibility: visible;
}

JS로 변경을 트리거하는 경우 클릭시 좋은 해결 방법이 있습니다.

display : none 요소에서 애니메이션이 무시되지만 브라우저가 모든 변경 사항을 한 번에 적용하고 요소가 동시에 애니메이션되지 않는 동안 display : block 이되지 않기 때문에 문제가 발생하는 것을 볼 수 있습니다 .

트릭은 가시성을 변경 한 후 애니메이션을 트리거하기 전에 브라우저에 프레임을 렌더링하도록 요청하는 것입니다.

다음은 JQuery 예제입니다.

    $('.child').css({"display":"block"});
    //now ask the browser what is the value of the display property
    $('.child').css("display"); //this will trigger the browser to apply the change. this costs one frame render
    //now a change to opacity will trigger the animation
    $('.child').css("opacity":100);

절대 또는 고정 요소에서 Z- 색인을 사용할 수도 있습니다.

.item {
    position: absolute;
    z-index: -100;
}

.item:hover {
    z-index: 100;
}

이제 다른 요소의 Z- 색인은 -100에서 100 사이 여야합니다.

나는 이것이 당신의 질문에 대한 해결책이 아니라는 것을 알고 있습니다.

디스플레이 + 불투명도

내 접근 방식은 더 일반적인 질문을 해결하지만 아마도 이것은와 display함께 사용하여 해결해야 할 배경 문제였습니다 opacity.

내 소망은 요소가 보이지 않을 때 방해가되지 않도록하는 것이 었습니다. 이 솔루션은 정확히 다음을 수행합니다. 요소를 멀리 이동 하고 전환에 사용할 수 있습니다.

.child {
  left: -2000px;
  opacity: 0;
  visibility: hidden;
  transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;
}

.parent:hover .child {
  left: 0;
  opacity: 1;
  visibility: visible;
  transition: left 0s, visibility 0s, opacity 0.8s;
}

이 코드에는 브라우저 접두사 또는 이전 버전과의 호환성 해킹이 포함되어 있지 않습니다. 더 이상 필요하지 않기 때문에 요소가 어떻게 이동하는지 개념을 보여줍니다.

흥미로운 부분은 두 가지 전환 정의입니다. 마우스 포인터가 .parent요소를 가리키면 요소를 .child즉시 제자리에 배치해야하며 불투명도가 변경됩니다.

transition: left 0s, visibility 0s, opacity 0.8s;

호버가 없거나 마우스 포인터가 요소 밖으로 이동 한 경우 요소를 화면 밖으로 이동하려면 불투명도 변경이 완료 될 때까지 기다려야합니다.

transition: left 0s 0.8s, visibility 0s 0.8s, opacity 0.8s;

설정으로 display:none인해 레이아웃이 깨지지 않는 경우 개체를 멀리 이동하는 것이 실행 가능한 대안이 될 것입니다.

나는 대답하지 않았지만이 질문에 대해 머리에 못을 박 았으면 좋겠다.

내가 한 한 가지는 초기 상태의 여백을 "margin-left : -9999px"와 같이 설정하여 화면에 나타나지 않도록 한 다음 호버 상태에서 "margin-left : 0"을 재설정했습니다. 이 경우 "display : block"으로 유지하십시오. 나를 위해 트릭을 했습니까 :)

편집 : 상태를 저장하고 이전 호버 상태로 되 돌리지 않습니까? 좋아 여기에 JS가 필요합니다.

<style>
.hovered { 
    /* hover styles here */
}
</style>

<script type="text/javascript">
$('.link').hover(function() {
   var $link = $(this);
   if (!$link.hasclass('hovered')) { // check to see if the class was already given
        $(this).addClass('hovered');
   } 
});
</script>

onHoverIn / Out 양방향에 애니메이션을 적용하기 위해이 솔루션을 사용했습니다. 누군가에게 도움이되기를 바랍니다.

@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;
  }
}

CSS로 투명성을 애니메이션하는 방법 :
이것은 내 코드입니다 :
CSS 코드

.item {   
    height:200px;
    width:200px;
    background:red;
    opacity:0;
    transition: opacity 1s ease-in-out;
}

.item:hover {
    opacity: 1;
}
code {
    background: linear-gradient(to right,#fce4ed,#ffe8cc);
}

<div class="item">

</div>
<p><code> move mouse over top of this text</code></p>

또는이 데모 파일을 확인하십시오.

function vote () {
var vote = getElementById ( "yourOpinion")
if (this.workWithYou) :
vote + = 1};
ㅋㅋ

display:전환 할 수 없습니다. 원하는 작업을 수행하려면 jQuery를 사용해야 할 것입니다.