web-dev-qa-db-ja.com

1種類の変換のみのCSS遷移？

（遷移を使用して）1種類のCSS変換のみをアニメーション化することは可能ですか？

私はCSSを持っています：

cell{
  transform: scale(2) translate(100px, 200px);
  transition: All 0.25s;  
}

今、私はスケールのみをアニメーション化したいです。この場合、position：absoluteおよびleft/rightプロパティを使用できますが、私が覚えている限りでは、translate（）の方がパフォーマンスがはるかに優れています。また、追加のhtml要素の使用を避けたいと思います。

フィドル： http://jsfiddle.net/6UE28/2/

css3transformtransition
35
cimak

はい！それを2つのセレクターに分離し、そのうちの1つはtransition: noneで、その後、CSSリフローをトリガーして変更を適用します（それ以外の場合は、1つの変更と見なされて遷移します）。

var el = document.getElementById('el');
el.addEventListener('click', function() {
  el.classList.add('enlarged');
  el.offsetHeight; /* CSS reflow */
  el.classList.add('moved');
});
#el { width: 20px; height: 20px; background-color: black; border-radius: 100%; }
#el.enlarged { transform: scale(2); transition: none; }
#el.moved { transform: scale(2) translate(100px); transition: transform 3s; }
<div id="el"></div>
10
user

いいえ！transitionは、scale(2)のようなtransformの特定の値にのみ使用できません。

1つの可能な解決策は次のとおりです：（申し訳ありませんが、追加のHTMLを使用する必要があります）

HTML

<div class="scale">
<div class="translate">
Hello World
</div>
</div>

CSS

div.scale:hover {
    transform: scale(2);
    transition: transform 0.25s;
}
div.scale:hover div.translate {
    transform: translate(100px,200px);
}
32
Barun

はい、なぜですか。そのためには、実際に1つの変換のみを使用する必要があります。

これはあなたを混乱させるものです：要素自体に変換を適用しないでください。これを変更状態に適用します（:hoverまたは変更された状態で必要なスタイルを使用する別のクラス）。質問に対する@Davidのコメントをご覧ください。変更するプロパティのみの状態を変更すると、アニメーション化されます。

そのため、変更された状態に基づいて効果的に選択的に変更します。

ソリューション1：JavaScriptの使用（質問で指定したフィドルに基づいて）

デモ： http://jsfiddle.net/abhitalks/6UE28/4/

関連するCSS：

div{   
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
    /* do NOT specify transforms here */
}

関連するjQuery：

$('...').click(function(){
    $("#trgt").css({
        "-webkit-transform": "scale(0.5)"
    });
});

// OR 

$('...').click(function(){
    $("#trgt").css({
        "-webkit-transform": "translate(100px, 100px)"
    });
});

// OR

$('...').click(function(){
    $("#trgt").css({
        "-webkit-transform": "scale(0.5) translate(100px, 100px)"
    });
});

ソリューション2：CSSのみを使用

デモ2： http://jsfiddle.net/abhitalks/4pPSw/1/

関連するCSS：

div{   
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
    /* do NOT specify transforms here */
}

div:hover {
    -webkit-transform: scale(0.5);
}

/* OR */

div:hover {
    -webkit-transform: translate(100px, 100px);
}

/* OR */

div:hover {
    -webkit-transform: scale(0.5) translate(100px, 100px);
}
3
Abhitalks

reflow を強制する代わりに、setTimeoutを使用できます。

var el = document.getElementById('el');
el.addEventListener('click', function() {
  el.classList.add('enlarged');
  setTimeout(function() {el.classList.add('moved');})
});
#el { width: 20px; height: 20px; background-color: black; border-radius: 100%; }
#el.enlarged { transform: scale(2); transition: none; }
#el.moved { transform: scale(2) translate(100px); transition: transform 3s; }
<div id="el"></div>
0
Raphael Rafatpanah