📑

Mantineでtransitionやanimationがきかない時の対処法

に公開
Next.js
transition
Mantine
tech

経緯

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にすることで、その設定をオフにできる

参考

https://mantine.dev/theming/theme-object/#respectreducemotion

https://github.com/mantinedev/mantine/issues/2166

Discussion