アニメーション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ます。

ホバー直後の表示を変更したいのですが、トランジションを使用して不透明度を変更する必要があります。

マイケルズの回答に基づいて、これは使用する実際の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"プレフィックスをコピーして貼り付けた場合でも、Webkitブラウザーでしか機能しませんでした。

の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-indexを使用することもできます。

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

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

他の要素は-100と100の間のz-indexを持つはずです。

私が知っている、これはあなたの質問の解決策ではありません

ディスプレイ+不透明度

私のアプローチはより一般的な質問を解決しますが、おそらくこれを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;
}

このコードには、ブラウザのプレフィックスや下位互換性のハックは含まれていません。エレメントは不要になったため、エレメントをどのように移動するかという概念を示しているだけです。

興味深い部分は、2つの異なる遷移定義です。マウスポインターが.parent要素をホバーしているとき、要素を.childすぐに配置する必要があり、不透明度が変更されます。

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

ホバーがない場合、またはマウスポインターが要素の外に移動された場合、不透明度の変更が完了するまで待ってから、要素を画面の外に移動できます。

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

オブジェクトを遠ざけることは、設定display:noneがレイアウトを壊さない場合に実行可能な代替手段になります。

答えはしなかったのですが、この質問の頭に釘を打ってください。

私がしたことの1つは、初期状態のマージンを "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を使用する必要があります。