3

CSS3 トランジションに欠陥が見つかったようです。うまくいけばそうではありません。ここにジレンマがあります。

.element a span {
   display:none;
   opacity:0;
   position:absolute;
   top:-10px;
   -webkit-transition-property:top, opacity;
   -webkit-transition-duration:500ms;

}
.element a:hover span {
   display:inline;
   opacity:0.8;
   position:absolute;
   top:10px;
}

トランジションはこのようにはまったく機能しません。display:none 属性を削除しても機能しますが、この場合、リンクに display:none 属性が必要なので、ホバーする前にインターフェイスできないようにします。

何か案は？

素晴らしい

4

4 に答える 4

4

オーバーフローを a に非表示にすると、display: none; を使用する必要なく、スパンが非表示になります。10px上に移動したためです。

または、display:none; の代わりに。visibility:hidden; を使用してみてください。

于 2011-09-07T14:10:00.467 に答える
3

display:none を display:inline に変更すると、トランジションに関する限り、他のプロパティは役に立たなくなります。したがって、setTimeout を使用して、display:none/display:block の変更をクラスの変更から分離します。トランジションを適用するには、ブラウザーがそれらを個別の変更として認識する必要があります。悲しいことに、これは単に :hover を使用することはできず、ホバー時に JS イベント ハンドラーが必要になることを意味すると思います。

具体的には、JS で追加または削除する style="display:none" のインライン スタイル属性を使用し、スタイルシートから display:none を取り出します。

次に、JS で、display:none を (明示的に、または :hover 疑似クラスのスタイル ルールを使用して) 削除した後、クラスを明示的に追加/削除する setTimeout 関数を使用します。こうすることで、「this is display:inline」の変更は、遷移ルール​​を適用する他のスタイル プロパティの変更とは別個の以前のペイント可能なアクションになります。

逆に、イベント ハンドラーでクラスを元に戻し、setTimeout 関数を使用して display:none をインライン スタイルとして設定します。もちろん、タイムアウトは遷移時間と一致する必要があります (遷移が完了した後に display:none が発生するように)。

于 2013-05-24T18:12:40.933 に答える
0

私はJSで行きます。CSS トランジションは、高さが苦手です。これは、クリック拡張機能を作成するために使用したものです。いくつかのことを変更して、ホバーで同じことを行うことができます

// Dropdown

$(関数(){

    // Target the ul sibling to keep it generic
    var selector = $('.dropdown article > ul').siblings().addClass('selector');

    selector.click(function(){
                var targetUl = $(this).siblings('ul');

                if (targetUl.hasClass('open')) {
                            targetUl.removeClass('open').slideUp();
                } else {
                            targetUl.slideDown().addClass('open');
                }
    });

});

于 2013-08-27T14:33:27.043 に答える
0

または、幅または高さ 0 を、非表示の要素に隠されたオーバーフローと組み合わせて使用​​してみてください。これにより、トランジションを維持しながら他の要素を邪魔することはありません。

すなわち。

.element a span {
   overflow: hidden;
   height: 0;
   width: 0;
   opacity:0;
   position:absolute;
   top:-10px;
   -webkit-transition-property:top, opacity;
   -webkit-transition-duration:500ms;

}
.element a:hover span {
   overflow: visible;
   height: ???px;
   width: ???px;
   opacity:0.8;
   position:absolute;
   top:10px;
}
于 2013-05-08T20:00:15.060 に答える