Question

不透明度并没有改变，也没有转变，任何想法我做错了什么？（chrome浏览器）

如果我要添加'transitions'类，我只想将不透明度设置为0。它会消失，但不会先淡出。

<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

Answer 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 code：

$(".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);
});

Answer 2

的 LIVE DEMO

HTML：

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

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'); });

Answer 3

添加到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')

Answer 4

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。

无法在div上进行简单的不透明度转换

4 个答案: