앤트디자인(ant-design-vue) 모달 애니메이션 제거하는 방법(Is there any way to disable modal animations?)

앤트디자인(ant-design) 모달 애니메이션 제거하는 방법(Is there any way to disable modal animations?)

프로젝트에서 앤트디자인을 사용하다보면 Modal 컴포넌트의 애니메이션을 제거하고 싶은 경우가 생깁니다. 저또한 Vue 프로젝트에서 ant-design-vue 라이브러리를 사용하면서 Modal 컴포넌트의 애니메이션을 제거하려고 했으나 문서에서 찾으려고 했을 때 바로 나오지 않아서 꽤 귀찮게 찾은 경험이 있어서 해당 이슈 공유합니다. 리액트(React)에서도 동일하게 처리 가능하니 참고바랍니다.

Ant Design - The world's second most popular React UI framework

해결방법

해결방법은 의외로 굉장히 간단합니다. 사용하는 Modal 컴포넌트의 트랜지션과 마스크 트랜지션 속성 이름을 none으로 적용하면 애니메이션 효과가 사라집니다. 어떤 원리인지는 파악을 할 수 있으나 컴포넌트에서 해당 props를 제공하는지를 몰라서 조금 애먹었네요. (제가 찾던 시점에 ant-design-vue 문서에 없었던 것으로 기억... 있으면 유감..)

<Modal
transitionName="none"
maskTransitionName="none"
...
/>

Modal.method 방식으로 Modal 컴포넌트를 사용할 때도 동일하게 속성 값을 전달하면 됩니다.

// vue에서 JSX 방식으로 사용 가능합니다.
// only use local component
this.$modalview({
  content: () => <Component />
})

const $modalview = ({ suffix = 'default', ...params } = {}) => {
  const classnames = ['modalview', `modalview--${suffix}`]
  const mergedParams = {
    class: classnames,
    width: '100%',
    transitionName: 'none',
    maskTransitionName: 'none',
    // centered: true,
    maskClosable: true,
    ...params
  }
  
  Modal.warning(mergedParams)
}