动画后未触发媒体查询

Question

我有一个使用反应弹簧调整大小的组件。单击其他组件时将调整其大小。我在此组件内设置了一个媒体查询，该媒体查询应在调整大小但失败时触发。但是，如果我使用chrometools切换不同的设备，它就可以工作。

受控组件：

func authUI(_ authUI: FUIAuth, didSignInWith authDataResult: AuthDataResult?, error: Error?) {
        
        if let error = error {
            print(error)
            return
        }
        
        if let result = authDataResult, let userInfo = result.additionalUserInfo {
            if userInfo.isNewUser {
                let username: String
                if result.user.isAnonymous {
                    let usernameNumber = String(Int(Date().timeIntervalSince1970) * Int.random(in: 1...9)).suffix(6)
                    username = "Guest\(usernameNumber)"
                } else {
                    username = result.user.displayName ?? "" // displayName is nil here
                }
                var data = [
                    "username" : username
                ]

                // Do something here
            }
       }
}

控制组件：

import React from 'react'
import {useSpring, animated} from 'react-spring'
import styled from 'styled-components'


const PlayerWrapper = styled.div`
    @media all and (max-width: 700px) {
        background-color: red;
        grid-template-areas:
            'HEADER HEADER HEADER HEADER'
            '... ... ... ...'
            'COVER SONG ... ...'
            'CONTROLS CONTROLS CONTROLS CONTROLS';
    }

    background-color: purple;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    box-sizing: border-box;
    padding: 25px;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-areas:
        'HEADER HEADER HEADER'
        'COVER COVER COVER'
        'SONG SONG SONG'
        'CONTROLS CONTROLS CONTROLS';
`

export default function Player() {
    const mobileWidth = useSelector((state) => state.mobileWidth)
    const mobileHeight = useSelector((state) => state.mobileHeight)
    const isMobile = useSelector((state) => state.mobile)
    const dispatch = useDispatch()

    const convertToPercent = (numerator, denominator) => {
        return (numerator / denominator) * 100
    }

    if (window.innerWidth < mobileWidth) {
        dispatch(setWidth(window.innerWidth))
    }
    if (window.innerHeight < mobileHeight) {
        dispatch(setHeight(window.innerHeight))
    }

    const props = useSpring({
        width: isMobile
            ? `${convertToPercent(mobileWidth, window.innerWidth)}vw`
            : `100vw`,
        height: isMobile
            ? `${convertToPercent(mobileHeight, window.innerHeight)}vh`
            : `100vh`,
    })
    

    return (
      <animated.div style={props}>
        <PlayerWrapper>
            ...children
        </PlayerWrapper>
      </animated.div>
    )
}

这是我当前面临的问题的一个示例。关于我在这里做错什么的任何想法？