Блог

Я хочу, чтобы начальное значение опоры присутствия анимации в движении фрейма было равно false на мобильном устройстве, чтобы анимация не происходила. Я попытался создать состояние, используя useState, подобное этому, и установить его в useEffect.

 const [isMobile, setIsMobile] = useState(false);
useEffect(() => {
    if (window.innerWidth < 700) {
        setIsMobile(true);
    }
}, []);



<AnimatePresence initial={isMobile ? false : true}>
  <Switch location={location} key={location.key}>
        <Route exact path='/' component={Home} />
        <Route exact path='/projects/:projectId'component={ProjectPage}/>
        <Route exact path='/more/:optionId' component={Options} />
  </Switch>
 

Но проблема здесь в том, что эффект использования вызывается после рендеринга элементов. И, таким образом, анимация уже произошла. Есть ли способ решить эту проблему? Кроме того, я хочу удалить некоторые анимации на мобильных устройствах, потому что они не работают гладко на мобильных устройствах, и через некоторое время мобильный chrome продолжает сбоить. Он плавно работает на рабочем столе. Пожалуйста, помогите. Спасибо.

Вы пытались инициировать свое состояние с помощью этого:

 const [isMobile, setIsMobile] = useState(() => window.innerWidth < 700);
 

Лучшим способом было бы использовать медиа-запросы, что-то в этом роде https://github.com/contra/react-responsive

 const isMobile = useMediaQuery({ query: '(max-width: 720px)' })