我的应用程序第一次加载时我的 CSS 发生了变化

Question

我目前正在开发一个天气应用程序，当页面加载 CSS 与您搜索位置时不同，它显示在左上角。这是显示此内容的 gif。

https://imgur.com/aX2nbyy

谁能告诉我为什么图像在第一次搜索时会跳动，但在几次搜索后会平稳过渡？

我的代码：

CSS

html, body, #root {
    font: 0.9rem sans-serif;
    background: #0a1f44;
    color: #1e2432;
    height: 100%;
    margin: 0;
    width: auto;
}
    
.app.cold {
    background-image: url('./images/cold.jpg');
    background-size: cover;
    background-position: center;
    background-size: cover;
    background-position: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: 0.3s ease-in;
}
    
.app.warm{
    background-image: url('./images/warm.jpg');
    background-size: cover;
    background-position: center;
    background-size: cover;
    background-position: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: 0.3s ease-in;
}
    
    
.search {
    outline: none;
    padding: 20px 7%;
    border-radius: 20px;
    border: none;
    margin-bottom: 5%;
    background: rgba(250, 250, 250, 0.85);
}
    
.city {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 40px 8%;
    border-radius: 20px;
    background: rgba(250, 250, 250, 0.85);
    box-shadow: 10px 10px 5px 0px rgba(15, 15, 15, 0.404);
}

APP.JS

import React, { useState } from 'react';

import { fetchWeather } from './api/fetchWeather';
import './App.css';

const App = () => {
    const [query, setQuery] = useState('');
    const [weather, setWeather] = useState({});

    const dateBuilder = (d) => {
        let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
        let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

        let day = days[d.getDay()];
        let date = d.getDate();
        let month = months[d.getMonth()];
        let year = d.getFullYear();

        return `${day} ${date} ${month} ${year}`

    }

    const search = async (e) => {
        if(e.key === 'Enter') {
            const data = await fetchWeather(query)
           
            setWeather(data);
            setQuery('');     
        }
    }

    return (
        <div className ={
            (typeof weather.main != "undefined") 
            ? ((weather.main.temp > 18) 
            ? 'app warm' : 
            'app cold') 
            : 'app'}>
        
            <input
            type="text"
            className="search"
            placeholder="Search... "
            value ={query}
            onChange={(e) => setQuery(e.target.value)}
            onKeyPress={search}
            />

            {weather.main && (
                <div className="city">
                    <h2 className="city-name">
                        <span>{weather.name}</span>
                        <sup>{weather.sys.country}</sup>
                    </h2>
                    <div className ="city-temp">
                        {Math.round(weather.main.temp)}
                        <sup>&deg;C</sup>
                        </div>
                        <div className="info">
                        <img className="city-icon" src={`https://openweathermap.org/img/wn/${weather.weather[0].icon}@2x.png`} alt= 
    {weather.weather[0].description} />
                        <p>{weather.weather[0].description}</p>
                    </div>
                </div>
            )}
        </div>
    );
}

export default App;

Answer 1

如果您可以在任何编辑器上托管您的代码，那么它会很容易检查和解决。

现在，根据我的理解，您应该使用一个包装器类来保存您的冷暖 + 搜索容器 div，并且该包装器应该具有 display: flex、align-items:center、justify-items:center 等以及最重要的是要有一个最小高度来包装。因为在应用程序中首先查看您的冷暖容器不会呈现到浏览器中，因此任何父类都没有最小高度，这将导致您在高度方面保持布局。当您的查询搜索一些带有图像等的 div 时，您的布局看起来不错。