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

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

问：

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