Не ўдаецца зрабіць просты пераход непразрыстасці на DIV

Непразрыстасць не мяняецца, ні ў яго пераходзе, якія-небудзь ідэі, што я раблю не так? (Хром браўзэр)

Я толькі хачу, каб усталяваць непразрыстасць на 0, калі я дадаю клас 'пераходаў. Такія, што яна выліньвае, але не знікае з першых.

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

<div></div>

start


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

Змяніць: Я забыўся клас на якары, і я выкарыстоўваю убудаваныя непразрыстасці ў рэальным жыцці.

Update: this is my solution I went with: https://stackoverflow.com/a/16848785/33522

0
Глядзіце маё рашэнне ніжэй ... stackoverflow.com/a/16848785/33522
дададзена аўтар chovy, крыніца

8 адказы

ваш селектар у скрыпічнага ISNT ўзгаднення якіх-небудзь элементаў

start

$ ( «Старт») будзе адпавядаць любому элементу з класам "старт"

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

Update:

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);
});
1
дададзена
На жаль, мой першапачатковы пытанне было не вельмі зразумелым. Я абнавіў яго вага/раствора. Трук быў SetTimeout таму маё зыходны стан можа быць атрымана.
дададзена аўтар chovy, крыніца
Вы можаце патлумачыць, што функцыя схаваць/паказаць гэта робіць?
дададзена аўтар chovy, крыніца
Вы можаце праверыць гэта? Мой прыклад быў дрэнны: jsfiddle.net/chovy/t37k3/9
дададзена аўтар chovy, крыніца
у асноўным проста дурэць, перш чым я на самой справе зразумеў, што ваша пытанне. : р
дададзена аўтар Kevin Nacios, крыніца
іншая скрыпка, каб паказаць больш, вы можаце зрабіць: jsfiddle.net/t37k3/40
дададзена аўтар Kevin Nacios, крыніца
вы ланцужок іншага .css выкліку, каб усталяваць непразрыстасць на 1 адразу, замест таго, каб дазволіць пераходу апрацоўваць яго для вас: jsfiddle.net/t37k3/32
дададзена аўтар Kevin Nacios, крыніца

ваш селектар у скрыпічнага ISNT ўзгаднення якіх-небудзь элементаў

start

$ ( «Старт») будзе адпавядаць любому элементу з класам "старт"

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

Update:

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);
});
1
дададзена
Вы можаце патлумачыць, што функцыя схаваць/паказаць гэта робіць?
дададзена аўтар chovy, крыніца
На жаль, мой першапачатковы пытанне было не вельмі зразумелым. Я абнавіў яго вага/раствора. Трук быў SetTimeout таму маё зыходны стан можа быць атрымана.
дададзена аўтар chovy, крыніца
Вы можаце праверыць гэта? Мой прыклад быў дрэнны: jsfiddle.net/chovy/t37k3/9
дададзена аўтар chovy, крыніца
у асноўным проста дурэць, перш чым я на самой справе зразумеў, што ваша пытанне. : р
дададзена аўтар Kevin Nacios, крыніца
іншая скрыпка, каб паказаць больш, вы можаце зрабіць: jsfiddle.net/t37k3/40
дададзена аўтар Kevin Nacios, крыніца
вы ланцужок іншага .css выкліку, каб усталяваць непразрыстасць на 1 адразу, замест таго, каб дазволіць пераходу апрацоўваць яго для вас: jsfiddle.net/t37k3/32
дададзена аўтар Kevin Nacios, крыніца

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

<div></div>

start

$(".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 стан уступіць у сілу.

Затым скінуць яго на наступных клікаў (не абавязкова, але дапамагае скрыпку дэма).

Каментары вітаюцца. Я хацеў рабіць, каб пазбегнуць якіх-небудзь убудаваны CSS у JavaScript, калі гэта наогул магчыма.

0
дададзена

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

<div></div>

start

$(".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 стан уступіць у сілу.

Затым скінуць яго на наступных клікаў (не абавязкова, але дапамагае скрыпку дэма).

Каментары вітаюцца. Я хацеў рабіць, каб пазбегнуць якіх-небудзь убудаваны CSS у JavaScript, калі гэта наогул магчыма.

0
дададзена

<�моцны> ЖЫВЫ DEMO

HTML:

<div></div>
start <!-- 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');
});
0
дададзена
Скрыпку не працуе для мяне. А чаму б пераход на «ўсё» змяніць што-небудзь, калі ўсё, што я хачу непразрыстасці?
дададзена аўтар chovy, крыніца

<�моцны> ЖЫВЫ DEMO

HTML:

<div></div>
start <!-- 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');
});
0
дададзена
Скрыпку не працуе для мяне. А чаму б пераход на «ўсё» змяніць што-небудзь, калі ўсё, што я хачу непразрыстасці?
дададзена аўтар chovy, крыніца

Для таго, каб дадаць адказ 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')
0
дададзена
Я павінен быў быць больш ясным. Я толькі хачу, каб усталяваць непразрыстасць на 0, калі я дадаю клас 'пераходаў. Такая, што яна выліньвае, але не знікаць. Рабіць тое, што вы прапануеце фактычна робіць яго згасаць для мяне. jsfiddle.net/chovy/t37k3/26
дададзена аўтар chovy, крыніца

Для таго, каб дадаць адказ 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')
0
дададзена
Я павінен быў быць больш ясным. Я толькі хачу, каб усталяваць непразрыстасць на 0, калі я дадаю клас 'пераходаў. Такая, што яна выліньвае, але не знікаць. Рабіць тое, што вы прапануеце фактычна робіць яго згасаць для мяне. jsfiddle.net/chovy/t37k3/26
дададзена аўтар chovy, крыніца