트랜지션
트랜지션 (Transitions)
이 테마 헬퍼들을 사용하면 커스텀 CSS 트랜지션을 만들 수 있고, 지속 시간(duration), 이징(easing) 등을 커스터마이즈할 수 있어요.
출처: 문서
본문
이 테마 헬퍼들은 커스텀 CSS 트랜지션을 만들 수 있게 해 주고, 지속 시간, 이징 등을 커스터마이즈할 수 있어요.
API
theme.transitions.create(props, options) => transition
인자 (Arguments)
props(string | string[]): 기본값은['all']이에요. 트랜지션할 CSS 속성 하나 또는 목록을 제공해요.options(object [선택]):
options.duration(string | number [선택]): 기본값은theme.transitions.duration.standard이에요. 트랜지션의 지속 시간을 제공해요.options.easing(string [선택]): 기본값은theme.transitions.easing.easeInOut이에요. 트랜지션의 이징을 제공해요.options.delay(string | number [선택]): 기본값은0이에요. 트랜지션의 지연을 제공해요.
반환값 (Returns)
transition: 트랜지션할 모든 CSS 속성을 정의된 지속 시간, 이징, 지연과 함께 조합한 CSS 트랜지션 값이에요.
예를 들어, theme.transitions.create(['background-color', 'transform'])를 호출하면 다음과 같은 문자열을 반환해요:
'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,transform 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms';
UI 요소에 일관된 트랜지션을 만들려면 theme.transitions.create() 헬퍼를 사용하세요.
theme.transitions.create(['background-color', 'transform']);
예제 (Example)
import { styled, createTheme, ThemeProvider } from '@mui/material/styles';
import { deepPurple } from '@mui/material/colors';
import Avatar from '@mui/material/Avatar';
const customTheme = createTheme({
palette: {
primary: {
main: deepPurple[500],
},
},
});
const StyledAvatar = styled(Avatar)`
${({ theme }) => `
cursor: pointer;
background-color: ${theme.palette.primary.main};
transition: ${theme.transitions.create(['background-color', 'transform'], {
duration: theme.transitions.duration.standard,
})};
&:hover {
background-color: ${theme.palette.secondary.main};
transform: scale(1.3);
}
`}
`;
export default function TransitionHover() {
return (
<ThemeProvider theme={customTheme}>
<StyledAvatar>OP</StyledAvatar>
</ThemeProvider>
);
}
theme.transitions.getAutoHeightDuration(height) => duration
인자 (Arguments)
height(number): 컴포넌트의 높이에요.
반환값 (Returns)
duration: 높이에 기반해 계산된 지속 시간이에요.
동작 줄이기 (Reduced motion)
v9.1.0부터, 동작 줄이기 동작을 theme.motion.reducedMotion으로 구성할 수 있어요.
const theme = createTheme({
motion: {
reducedMotion: 'system',
},
});
지원되는 값은 다음과 같아요:
never(기본값): 일반 트랜지션 동작을 유지해요.system: 사용자의 운영체제가prefers-reduced-motion: reduce로 요청할 때만 동작을 줄여요.always: 운영체제 설정과 무관하게 모든 사용자에게 동작을 줄여요.
이 설정은 Collapse, Fade, Grow, Slide, Zoom 같은 Material UI 트랜지션 컴포넌트뿐 아니라 Accordion, Menu, Tabs 등 애니메이션이 있는 컴포넌트들도 제어해요.
앱에서 커스텀 CSS 트랜지션을 사용한다면, theme.transitions.create()를 사용하고 동작 줄이기 오버라이드를 직접 추가하세요:
const styles = {
transition: theme.transitions.create(['background-color', 'transform']),
...(theme.motion.reducedMotion === 'always' && {
transition: 'none',
}),
...(theme.motion.reducedMotion === 'system' && {
'@media (prefers-reduced-motion: reduce)': {
transition: 'none',
},
}),
};
테마가 system이나 always를 사용하는 동안 특정 트랜지션 컴포넌트만 정상적인 동작을 유지해야 한다면, 해당 트랜지션 컴포넌트에 disablePrefersReducedMotion을 설정하세요.
<Fade in disablePrefersReducedMotion>
<div />
</Fade>
지속 시간 (Durations)
지속 시간 값의 일부 또는 전체를 변경하거나, 직접 제공할 수 있어요(create() 헬퍼에서 사용하기 위해). 이 예제는 모든 기본값(밀리초 단위)을 보여주지만, 변경하거나 추가하려는 키만 제공해도 충분해요.
const theme = createTheme({
transitions: {
duration: {
shortest: 150,
shorter: 200,
short: 250,
// most basic recommended timing
standard: 300,
// this is to be used in complex animations
complex: 375,
// recommended when something is entering screen
enteringScreen: 225,
// recommended when something is leaving screen
leavingScreen: 195,
},
},
});
이징 (Easings)
커스텀 CSS transition-timing-function 값을 제공하면 이징 값의 일부 또는 전체를 변경하거나 직접 제공할 수 있어요.
const theme = createTheme({
transitions: {
easing: {
// This is the most common easing curve.
easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
// Objects enter the screen at full velocity from off-screen and
// slowly decelerate to a resting point.
easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
// Objects leave the screen at full velocity. They do not decelerate when off-screen.
easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
// The sharp curve is used by objects that may return to the screen at any time.
sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',
},
},
});
참고 자료 (References)
Material UI에 포함된 트랜지션 컴포넌트를 살펴보려면 Transitions 페이지를 확인해 보세요.