0

不透明度は変化しておらず、移行もしていません。何が間違っているのか分かりませんか? (クロームブラウザ)

「トランジション」クラスを追加する場合にのみ、不透明度を 0 に設定します。フェードインしますが、最初にフェードアウトしません。

http://jsfiddle.net/chovy/t37k3/9/

<div></div>

<a href="#" class="start">start</a>


div { 
    width: 100px;
    height: 100px;
    background: #f00;
}

div.transitions {
    -moz-transition: opacity 1s, -moz-transform 1s;
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    -o-transition: opacity 1s, -o-transform 1s;
    transition: opacity 1s, transform 1s; 
}

$(".start").click(function(e){
    e.preventDefault();
    $("div").css('opacity', 0).addClass('transitions').css('opacity', 1);
});

編集:アンカーのクラスを忘れて、実際にインライン不透明度を使用しています。

更新:これは私が行った私のソリューションです: https://stackoverflow.com/a/16848785/33522

4

4 に答える 4

1

フィドルのセレクターがどの要素とも一致しません

<a href="#" class="start">start</a>

$(".start") は、クラス "start" を持つすべての要素と一致します

http://jsfiddle.net/t37k3/5/

更新：

http://jsfiddle.net/t37k3/43/

css に次を追加します。

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  -ms-transition: none !important;
  transition: none !important;
}

js コード:

$(".show").click(function(e){
    e.preventDefault();
    $("div").css('opacity', 0)  // sets the opacity to 0
    .addClass("notransition")   // add notransition class (will override any other transitions
    .addClass("transitions");   // add the transition css rules (notransition overrides)

    // need this in a setTimeout in order for the 
    // code to delay and let the jquery chaining finish 
    // before we remove notransition and set opacity to 1
    setTimeout(function () {
        $("div").removeClass("notransition")
       .css('opacity', 1)
    }, 0);
});
于 2013-05-31T01:20:54.530 に答える
0

LIVE DEMO

HTML:

<div></div>
<a href="#" class="start">start</a> <!-- ADD A CLASS -->

CSS:

div { 
    opacity: 0.1;
    width: 100px;
    height: 100px;
    background: #f00;
}

.transitions {
    -moz-transition: opacity 1s;     /* NO NEED TO TRANSFORM */
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s; 
    opacity:1;
}

jQ:

$(".start").click(function(e){
    e.preventDefault();
    $("div").addClass('transitions');
});
于 2013-05-31T01:25:40.320 に答える
0

PSLの回答に追加するには...

クラスを追加して移行を行う場合は、要素に追加するクラスに必要な最終結果の CSS ルールを配置します。

したがって、.transitions クラスは次のようになります。

div.transitions {
    opacity: 1;
    -moz-transition: opacity 1s, -moz-transform 1s;
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    -o-transition: opacity 1s, -o-transform 1s;
    transition: opacity 1s, transform 1s; 
}

そして、あなたのクリックには

$(".start").addClass('transition')
于 2013-05-31T01:27:59.583 に答える
0

http://jsfiddle.net/chovy/t37k3/42/

<div></div>

<a href="#" class="start">start</a>

$(".start").click(function(e){
    e.preventDefault();

    var transitions = true
        , $div = $("div"); 

    $div.removeClass('transitions');

    if ( transitions ) {
        $div.addClass('start');
        setTimeout(function(){
            $div.addClass('transitions').removeClass('start');
        }, 20);
    }
});

div { 
    width: 100px;
    height: 100px;
    background: #f00;
}

div.start {
    opacity: 0.1;
}

div.transitions {
    -moz-transition: opacity 2s;
    -webkit-transition: opacity 2s;
    -o-transition: opacity 2s;
    transition: opacity 2s; 
    opacity: 1;
}

これが私がやったことです。.startトランジションを使用している場合は、デフォルトの状態を設定するクラスを追加します。.transitions次に、短い一時停止の後にクラスを追加して、.start状態が有効になるようにします。

次に、その後のクリックでリセットします（必要ではありませんが、フィドルのデモに役立ちます）。

コメントは大歓迎です。可能な限り、javascript でインライン css を実行することは避けたかったのです。

于 2013-05-31T02:12:37.397 に答える