淡入包含多个 div 的整个 div

Answer 1

因此，在让它工作的同时，我发现了一些可能在您的 html 中让您感到困惑的不良做法：

• 将一个 div 声明为多个类，千万不要这样做
• 将嵌套的 div 声明为相同的类，在某些情况下这是可以的，但出于您的目的，这是不正确的

所以我在你的 html 中修复了这些，然后添加了一些额外的 css 以继续以前的样式：

.containerStats {left: 22px;}

.hidden {
  opacity: 0;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.show {
  opacity: 1;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

然后为了使包含天气统计的html div随着我们放入的css淡入和淡出，我们需要淡出html块，等待动画然后淡入。这最好通过a来实现新的函数调用和对先前函数的更改以将它们链接在一起。

async function getData(full_url) {
  // get data
  animateChangeOutput(cityTemperature, cityHumidity, cityWindSpeed, weatherAdjective, weatherIcon);
}

function animateChangeOutput(cityTemperature, cityHumidity, cityWindSpeed, weatherAdjective, weatherIcon) {
    weatherStats = document.getElementById('weatherStats');
  weatherStats.setAttribute('class', 'hidden');
  
  if (i == 1){
    changeOutput(cityTemperature, cityHumidity, cityWindSpeed, weatherAdjective, weatherIcon)
  }else {
    setTimeout(() => { changeOutput(cityTemperature, cityHumidity, cityWindSpeed, weatherAdjective, weatherIcon); }, 1000);
  }
  
  setTimeout(() => {  weatherStats.setAttribute('class', 'show'); }, 1000);
}

我觉得整个页面都可以进行重组，让这些工作变得更简单、更容易，但这是我能做的最好的事情，而无需对你所做的任何事情进行重大更改

完整的 JSFiddle 可以在这里找到https://jsfiddle.net/q59n37rx/