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

Question

不透明度没有改变，也没有过渡，知道我做错了什么吗?(浏览器)

我只想在添加"过渡"类时将不透明度设置为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

Answer 1

你的选择器没有匹配任何元素

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

$(".start")将匹配任何带有"start"类的元素

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

:

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

添加:

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

Answer 2

现场演示

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

金桥:

$(".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。