Saya sedang membangun situs web untuk mempelajari interaksi antara CSS dan HTML, tapi, saya punya masalah dengan ini: "halaman bermasalah".

Div di sebelah kanan akan melakukan transisi ke bawah dan terjemahan ini harus berdurasi satu detik, tetapi, ini jauh lebih cepat.

Saya tidak mengerti masalahnya.

function setDescription(eventId) {
    var curEv = getEventById(eventId);

    var didascalia = document.getElementById("didascalia");
    didascalia.firstChild.data = curEv.titolo;

    var eventDescription = document.getElementById("eventDescription");
    if (eventDescription.firstChild) eventDescription.firstChild.data = curEv.descrizione;
    else eventDescription.appendChild(document.createTextNode(curEv.descrizione));

    var image = document.getElementById("imageEventImmagine");
    if (image) {
        if (image.alt === curEv.tipologia) return;
        image.src = "./resource/img/eventi/" + curEv.tipologia + ".jpg";
        image.alt = curEv.tipologia;
    } else {
        var divImmagine = document.getElementById("divImmagine");
        var img = document.createElement("img");
        img.id = "imageEventImmagine";
        img.src = "./resource/img/eventi/" + curEv.tipologia + ".jpg";
        img.alt = curEv.tipologia;
        divImmagine.appendChild(img);
    }
}
.smalldesc {
    overflow: hidden;
    transition: all .10s ease;
}

.smalldesc.expand {
    max-height:  100%;
}
<div id="expand" class="basePreventivo smalldesc">
    <h3 id="didascalia">Seleziona un'evento</h3>
    <p id="eventDescription"></p>
    <div id="divImmagine" class="fill"></div>
</div>
1
Luca Bigoni 24 Desember 2020, 02:53

3 jawaban

Jawaban Terbaik

transition: all .10s ease;

Ubah .10 menjadi 1 untuk membuat transisi lebih lama. Juga

1
vioxii 24 Desember 2020, 00:49

Waktu transisi diberikan .10s dalam CSS, ubah menjadi 1s untuk membuatnya lebih lama.

1
Shivam Shukla 24 Desember 2020, 00:04

Masalah Anda adalah bahwa tinggi (atau tinggi maksimum) hanya dapat ditransisikan jika transisi antara dua nilai literal (tanpa persentase atau otomatis).

Sebagai contoh:

0px to 100px - ✅
0px to 10rem - ✅
auto to 100px - 🚫
0px to auto - 🚫
0px to 100% - 🚫

Selain itu, jika Anda ingin transisi berlangsung selama 1 detik, Anda perlu menyesuaikan waktu transisi dari 0.1s ke 1s.

Untuk mengatasi masalah nilai animasi Anda - lihat artikel ini yang membahas beberapa pendekatan untuk mencapai apa yang Anda butuhkan: Menggunakan Transisi CSS pada Dimensi Otomatis

1
camaulay 24 Desember 2020, 00:09