Неожиданное поведение элементов слайдера с разной высотой. ⇐ CSS

[Anonymous]

У меня есть три раздела погоды: текущая погода, прогноз на 1 день и, наконец, прогноз на 5 дней, все они используют один и тот же раздел погоды класса< /code>, но предполагается, что они имеют разную высоту.
Я добавил эффект слайд-анимации к разделам, которые срабатывают, когда пользователь нажимает соответствующую вкладку .
Однако следующий слайд находится под или поверх предыдущего во время анимации. Он занимает свое обычное положение только после завершения анимации, как в этом примере, прогноз на следующий день находится под разделом текущей погоды и занимает свое нормальное положение только после завершения анимации:
< img alt="введите здесь описание изображения" src="https://i.sstatic.net/yrXCsou0.gif" />

Код: Выделить всё

let selectedWeatherSection = 1;
let isFetching = false;

const currentWeatherLabel = document.querySelector('label[for="current-weather"]');

const oneDayForecastLabel = document.querySelector('label[for="one-day-forecast"]');

const fiveDayForecastLabel = document.querySelector('label[for="five-days-forecast"]');

function afterNextRepaint(callback) {
if (typeof callback !== 'function')
return;

requestAnimationFrame(() => {
requestAnimationFrame(() => {
callback();
});
});
}

function showWeatherSection(n) {
if (isFetching || selectedWeatherSection === n) // Stop the animation
return;

const weatherSections = document.querySelectorAll("main div.container section.weather-section");
const tabs = document.querySelectorAll("main div.container div.weather-tab div.wrapper label");
const tempIndex = selectedWeatherSection;

tabs[selectedWeatherSection - 1].classList.remove("active");

if (n > weatherSections.length)
selectedWeatherSection = 1;
else if (n < 1)
selectedWeatherSection = weatherSections.length;
else
selectedWeatherSection = n;

isFetching = true;

const activeWeatherSection = document.querySelector("main div.container section.weather-section.active");
const nextSection = weatherSections[selectedWeatherSection - 1];
const nextTab = tabs[selectedWeatherSection - 1];

if (n > tempIndex) {
nextSection.classList.add("next");

afterNextRepaint(() => {
activeWeatherSection.classList.add("left");
nextSection.classList.add("left");
});

nextSection.addEventListener('transitionend', () => {
nextSection.classList.add("active");

activeWeatherSection.classList.remove("left");
activeWeatherSection.classList.remove("active");

nextSection.classList.remove("next");
nextSection.classList.remove("left");

isFetching = false;
},
{once: true}
);
} else {
nextSection.classList.add("prev");

afterNextRepaint(() => {
activeWeatherSection.classList.add("right");
nextSection.classList.add("right");
});

nextSection.addEventListener('transitionend', () => {
nextSection.classList.add("active");

activeWeatherSection.classList.remove("right");
activeWeatherSection.classList.remove("active");

nextSection.classList.remove("prev");
nextSection.classList.remove("right");

isFetching = false;
},
{once: true}
);
}
nextTab.classList.add("active");
}

const downloadForecast = (forecastDuration, forecastLink) => {
if (isFetching)
return

if (forecastDuration === "one-day")
showWeatherSection(2);
else if (forecastDuration === "five-days")
showWeatherSection(3)

// some AJAX resuests..
}

currentWeatherLabel.addEventListener('click', () =>
showWeatherSection(1)
);

oneDayForecastLabel.addEventListener('click', () =>
downloadForecast("one-day", "./weather/one-day-forecast")
);

fiveDayForecastLabel.addEventListener('click', () =>
downloadForecast("five-days", "./weather/five-days-forecast")
);

Код: Выделить всё

main {
display: flex;
justify-content: center;
padding-top: 50px;
background: #DCDCDD;
}

main div.container {
max-width: 1266px;
width: 60%;
height: 100%;
background: #DCDCDD;
}

main div.container >  section.weather-section {
position: relative;
display: none;
-webkit-transition: 1s ease-in-out left;
transition: 1.5s ease-in-out left;
}

main div.container > section.weather-section.next,
main div.container > section.weather-section.prev {
position: relative;
top: 0;
width: 100%
}

main div.container > section.weather-section.next {
left: 100%
}

main div.container > section.weather-section.prev {
left: -100%
}

main div.container > section.weather-section.next.left,
main div.container > section.weather-section.prev.right {
left: 0
}

main div.container > section.weather-section.active.left {
left: -100%
}

main div.container > section.weather-section.active.right {
left: 100%
}

main div.container > section.weather-section.active {
left: 0;
}

main div.container > section.weather-section.active,
main div.container > section.weather-section.next,
main div.container > section.weather-section.prev {
display: block;
}

.today-weather {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
margin: 23px 0;
}

.today-weather h2 {
display: block;
width: 100%;
text-align: center;
font-size: 30px;
}

.today-current-weather {
display: flex;
width: 65%;
}

.today-current-weather div {
width: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.current-condition div {
height: 114px;
width: 70%;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
}

.current-condition-icon img {
height: 132px;
width: 144px;
}

.current-highlight {
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin-bottom: 100px;
}

.current-highlight h2 {
display: block;
width: 100%;
text-align: center;
font-size: 30px;
}

div.weather-info {
display: flex;
width: 100%;
justify-content: space-around;
flex-wrap: wrap;
}

.weather-card {
position: relative;
background: #f7f7ff;
width: 30%;
height: 222px;
margin: 19px;
border-radius: 35px;
display: flex;
flex-direction: row; /* make child items grow/shrink vertically */
flex-wrap: wrap;
align-content: center;
animation-name: card-animation;
animation-duration: 1s;
animation-fill-mode: forwards;
opacity: 0.2;
}

.weather-card span.weather-card-title {
position: absolute;
margin-top: 10px;
color: #60656F;
width: 100%;
height: 20%;
display: flex;
align-items: center;
justify-content: center;
font-size: larger;
text-align: center;
font-weight: bold;
}

.weather-card div.weather-card-information {
flex-grow: 1;
margin-top: 14%;
height: calc(100% - 20%);
}

div.humidity, div.wind, div.real-temperature-data, div.visibility, div.real-temperature-shade {
display: flex;
}

.wind-data {
width: 100%;
}

.wind-data >  div {
height: 50%;
width: calc(100% - 35px);
}

.humidity-data, .wind-data {
display: flex;
flex-direction: column;
}

.humidity-data, .humidity-indicator {
width: 50%;
}

.humidity-data-percentage, .humidity-data-description {
height: 50%;
}

.wind-speed, .wind-direction {
height: 50%;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: 35px;
}

.visibility, .visibility-data {
height: 100%;
}

.visibility-data-percentage, .visibility-data-description {
height: 50%;
display: flex;
}

.weather-card div.weather-card-information.uv-index {
display: flex;
justify-content: center;
align-items: center;
}

@keyframes card-animation {
from {
transform: translateY(50px);
opacity: 0.2;
}
to {
transform: translateY(0);
opacity: 1;
}
}

.weather-tab {
display: flex;
flex-direction: column;
align-items: center;
}

.wrapper {
height: 100%;
width: 55vw;
background: #fff;
line-height: 60px;
border-radius: 40px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
}

.wrapper nav {
position: relative;
display: flex;
}

.wrapper nav label {
flex: 1;
width: 100%;
z-index: 1;
cursor: pointer;
text-align: center;
}

.wrapper nav label a {
position: relative;
z-index: -1;
color: #1d1f20;
font-size: 20px;
font-weight: 500;
text-decoration: none;
transition: color 0.6s ease;
}

.wrapper nav #home:checked ~ label.current-weather a,
.wrapper nav #inbox:checked ~ label.one-day-forecast a,
.wrapper nav #contact:checked ~ label.five-days-forecast a {
color: #fff;
}

.wrapper nav label a i {
font-size: 25px;
margin: 0 7px;
}

.wrapper nav .tab {
position: absolute;
height: 100%;
width: 33.33%;
left: 0;
bottom: 0;
z-index: 0;
border-radius: 50px;
background: linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper nav label[for="current-weather"].active ~ .tab {
left: 0;
}

.wrapper nav label[for="one-day-forecast"].active ~ .tab {
left: 33.33%;
}

.wrapper nav label[for="five-days-forecast"].active ~ .tab {
left: 66.66%;
}

.wrapper nav input {
display:  none;
}

Код: Выделить всё

[url=#]Current weather[/url]



[url=#]One day forecast[/url]



[url=#]Five days forecast[/url]









Current Condition




[img]./images/icons/wind-icon.gif[/img]
150 Km/h

30° w





Feels like



25




Humidity




60
OK








Visibility




55 Km
55





Temperature in shade




30









One day forecast



Five days forecast

Мне хотелось бы знать, почему это происходит и как это исправить.

Подробнее здесь: https://stackoverflow.com/questions/792 ... nt-heights