Проблема с переходом на CSS, установленным JS

Я создаю веб-сайт, чтобы изучить взаимодействие между CSS и HTML, но у меня есть проблема с этим: "проблемная страница".

Div справа будет выполнять переход вниз, и этот перевод должен длиться секунду, но это намного быстрее.

Я не понимаю проблемы.

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>

javascript html css

24.12.2020 00:53

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Время перехода указано в CSS 0,10 с, измените его на 1 с, чтобы сделать его длиннее.

24.12.2020 01:04

Ваша проблема в том, что высота (или максимальная высота) может быть изменена только в том случае, если она переходит между двумя литеральными значениями (без процентов или автоматически).

Например:

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

Кроме того, если вы хотите, чтобы ваш переход длился 1 секунду, вам нужно будет настроить время перехода с 0.1s на 1s.

Чтобы решить проблемы со значением анимации, ознакомьтесь с этой статьей, в которой обсуждается несколько подходов к достижению того, что вам нужно: Использование переходов CSS для автоматических размеров

24.12.2020 01:09

Ответ принят как подходящий

transition: all .10s ease;

Измените .10 с на 1 с, чтобы сделать переход длиннее. Также

24.12.2020 01:49