web-dev-qa-db-ja.com

アニメーション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の変更を削除した場合にのみ機能します。

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

cssanimationcss3
82
Alexis Delrieu

私は少し変えましたが、結果は美しいです。

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

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

みんなありがとう。

6
Alexis Delrieu

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;
    }
}
102
Chris

CSSアニメーションで次のことができます。

0% display:none ; opacity: 0;
1% display: block ; opacity: 0;
100% display: block ; opacity: 1;
38
Michael Mullany

可能であれば-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;
}
29
tomas.satinsky

この回避策は機能します。

  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;
}
8
Hermann Schwarz

これを使って達成しました。ホバーでフェードしますが、隠れているときにスペースを取りません、完璧です！

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

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

ポインターイベントを使用してこれを実行する別の良い方法があります。

.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以下ではサポートされていません。

5
RafaelKr

同じ問題がありました。 @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;
}
4
Dave

JSを使用して変更をトリガーする場合は、クリックすると、いい回避策があります。

アニメーションはdisplay：none要素では無視されますが、ブラウザーはすべての変更を一度に適用し、要素がdisplay：blockであると同時にアニメーション化されないため、問題が発生します。

秘Theは、可視性を変更した後、アニメーションをトリガーする前にフレームをレンダリングするようにブラウザーに依頼することです。

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);
3
daniel.sedlacek

私は知っている、これは本当にあなたの質問の解決策ではない

ディスプレイ+不透明度

私のアプローチは、より一般的な質問を解決しますが、多分これは、displayをopacityと組み合わせて使用​​することで解決すべきバックグラウンドの問題でした。

私の望みは、目に見えない要素を邪魔にならないようにすることでした。このソリューションはそれを正確に行います：It moves要素を外に出し、これを遷移に使用できます：

.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を設定してもレイアウトが壊れない場合は、オブジェクトを移動することは実行可能な代替手段になります。

答えはしませんでしたが、この質問の頭に釘を打つことを望みます。

2
Hannes Morgenstern

絶対要素または固定要素では、z-indexも使用できます。

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

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

他の要素は、-100〜100のz-indexを持っているはずです。

2
Luca Steeb

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>

またはこのデモファイルを確認

関数vote（）{
var vote = getElementById（ "yourOpinion"）
if（this.workWithYou）：
vote + = 1};
笑

1
zakizakibzr

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;
  }
}
1
Nicholas

私がやったことの1つは、初期状態のマージンを「margin-left：-9999px」のように設定して画面に表示されないようにし、ホバー状態で「margin-left：0」をリセットすることでした。その場合は、「display：block」のままにしてください。私のためにトリックをしました:)

編集：状態を保存し、以前のホバー状態に戻しませんか？ Okここには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>
0
Joshua