📑
Mantineでtransitionやanimationが聞かない時の対処法
経緯
Next.jsでMantineを使ってみて、transitionが効かなくて少し詰まってしまったのでメモ
結論
MantineProviderのthemeプロパティのrespectReducedMotionをfalseにする。
_app.tsx
import { MantineProvider } from "@mantine/core";
// ...
function MyApp({ Component, pageProps }: any) {
// ...
return(
<MantineProvider
withGlobalStyles
withNormalizeCSS
theme={{ respectReducedMotion: false }}
>
// ...
</MantineProvider>
)
}
解説
Mantineはデフォルトではユーザー設定のアニメーション制限がかかるようになっている。
ユーザーの方でアニメーション制限をかけている場合があるので、Mantineのtransitionやanimationを使いたい場合はrespectReducedMotionをfalseにすることで、その設定をオフにできる
参考
Discussion