Pertanyaan Transisi CSS hanya untuk satu jenis transformasi?


Apakah mungkin untuk menghidupkan (menggunakan transisi) hanya satu jenis transformasi css?

Saya punya css:

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

Sekarang, saya hanya ingin skala menjadi animasi. Dalam hal ini saya dapat menggunakan posisi: properti absolut dan kiri / kanan tetapi sejauh yang saya ingat, menerjemahkan () jauh lebih baik dalam kinerjanya. Saya juga ingin menghindari menggunakan elemen html tambahan.

Biola: http://jsfiddle.net/6UE28/2/


31
2018-06-09 12:17


asal


Jawaban:


Iya nih! Anda memisahkannya menjadi dua selektor, salah satunya dengan transition: none, kemudian memicu CSS reflow di antara untuk menerapkan perubahan (jika tidak maka akan dianggap sebagai satu perubahan dan akan transisi).

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
2018-02-09 22:59



Tidak! Anda tidak bisa menggunakannya transition hanya untuk nilai tertentu transform seperti scale(2).

Satu solusi yang mungkin adalah sebagai berikut: (maaf, Anda harus menggunakan html tambahan)

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

22
2018-06-09 13:05



Ya, kenapa tidak. Untuk melakukan itu, Anda harus melakukannya sebenarnya hanya menggunakan satu transformasi.

Inilah yang membingungkan Anda: Anda tidak menerapkan transformasi pada elemen itu sendiri. Anda menerapkan itu ke negara-perubahan (melalui kelas pseudo seperti :hover atau kelas lain menggunakan gaya yang Anda inginkan dalam keadaan berubah). Silakan lihat komentar @ David tentang pertanyaan Anda. Anda mengubah status hanya untuk properti yang ingin Anda ubah dan yang akan dianimasikan.

Jadi, secara efektif Anda mengubahnya secara selektif berdasarkan pada status yang diubah.

Solusi 1: Menggunakan Javascript (berdasarkan biola yang Anda berikan dalam pertanyaan Anda)

Demo: http://jsfiddle.net/abhitalks/6UE28/4/

CSS yang relevan:

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

JQuery yang relevan:

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

Solusi 2: Hanya Menggunakan CSS

Demo 2: http://jsfiddle.net/abhitalks/4pPSw/1/

CSS yang relevan:

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

2
2018-06-09 13:07



Alih-alih memaksa a reflow, Anda malah bisa menggunakan 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
2018-04-12 13:19