1

シンプルなギャラリーに画像のコレクションがあり、マウスオーバーで小さなものから大きなものにスムーズに変換したい. 私は現在、マウスが上にあるときに画像の実際のサイズを明らかにし、そうでないときに特定のサイズに強制し、display:none で実際のサイズを非表示にすることでこれを行っています。

トランジションを改善するために、1 秒間にわたってこれを行うために、いくつかの Webkit 変換を含めたいと考えています。Webkit は要素を 2 つの状態の間で変換することだと理解していますが、これを実現できる方法はありますか。

JavaScriptも避けたいです。

.reveal a .preview
{
    display: none;
}

.reveal a:hover .preview
{
    display: block;
    position: absolute;
    z-index: 1;
}

.reveal img
{
    background: #fff
    padding: 2px;
    vertical-align: top;
    width: 100px;
    height: 75px;
}

.reveal li
{
    background: #eee;
    display: inline;
    float: left;
    margin: 3px;
    padding: 5px;
    position: relative;
}

.reveal .preview
{
    border-color: #000;
    width: auto;
    height: auto;
}
4

1 に答える 1

1

HTML（つまりjsfiddle）がないと、コード内にソリューションを挿入するのは難しい..しかし、ここに一般的なソリューションがありますhttp://jsfiddle.net/9QVae/2/

img
{
    width:100px;
    height:100px;
    background:red;
    transition:width 1s, height 1s;
    -moz-transition:width 1s, height 1s, -moz-transform 1s; /* Firefox 4 */
    -webkit-transition:width 1s, height 1s, -webkit-transform 1s; /* Safari and Chrome */
    -o-transition:width 1s, height 1s, -o-transform 1s; /* Opera */
}

ホバー時:

img:hover
{
    width:200px;
    height:200px;
}

そのため、エフェクトを追加する CSS プロパティ (幅など) を指定してから、イベントの期間を指定します。つまり、セレクターtransition:width 1s;の下で最終的なサイズを指定します。:hover

注： IEでは動作transitionしません

于 2013-02-24T14:03:45.153 に答える