17. Quasar, Vue3 Transition

Card형 UI가 나타날때 왼쪽에서 부터 스스륵 나타나는 효과를 주고싶었다.

공식문서에 적혀져 있는 방법과는 다르게 구현했다.

 

---

1. qusar.config 파일의 framwork 안에 있는 animations : 'all' 로 변경

framework: {
			config: {},

			// iconSet: 'material-icons', // Quasar icon set
			// lang: 'en-US', // Quasar language pack

			// For special cases outside of where the auto-import strategy can have an impact
			// (like functional components as one of the examples),
			// you can manually specify Quasar components/directives to be available everywhere:
			//
			// components: [],
			// directives: [],

			// Quasar plugins
			plugins: ['Dialog', 'LocalStorage', 'Loading'],
		},

		animations: 'all', // --- includes all animations
		// https://v2.quasar.dev/options/animations
		// animations: [],

		// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#sourcefiles
		// sourceFiles: {
		//   rootComponent: 'src/App.vue',
		//   router: 'src/router/index',
		//   store: 'src/store/index',
		//   registerServiceWorker: 'src-pwa/register-service-worker',
		//   serviceWorker: 'src-pwa/custom-service-worker',
		//   pwaManifestFile: 'src-pwa/manifest.json',
		//   electronMain: 'src-electron/electron-main',
		//   electronPreload: 'src-electron/electron-preload'
		// },f

		// https://v2.quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr
		ssr: {
			// ssrPwaHtmlFilename: 'offline.html', // do NOT use index.html as name!
			// will mess up SSR

			// extendSSRWebserverConf (esbuildConf) {},
			// extendPackageJson (json) {},

			pwa: false,

			// manualStoreHydration: true,
			// manualPostHydrationTrigger: true,

			prodPort: 3000, // The default port that the production server should use
			// (gets superseded if process.env.PORT is specified at runtime)

			middlewares: [
				'render', // keep this as last one
			],
		},

 

---

2. transition을 사용하고 싶은 컴포넌트에 적용

<template>
	<div>
		<q-page class="row items-center justify-center">
			<Transition name="slide-fade" appear>
				<div class="row q-gutter-x-xl">
					<q-card class="moduleCon">
						<div
							class="column items-center justify-center q-pa-sm"
							style="height: 100%"
						>
							<div
								class="column items-center justify-center"
								style="width: 60px; height: 60px; border-radius: 100%"
							>
								<q-icon name="bi-server" style="font-size: 30px" class="icon" />
							</div>

							<p class="text-bold q-mt-lg">BP ADC Server</p>
						</div>
					</q-card>
					<q-card class="moduleCon">
						<div
							class="column items-center justify-center q-pa-sm"
							style="height: 100%"
						>
							<div
								class="column items-center justify-center"
								style="width: 60px; height: 60px; border-radius: 100%"
							>
								<q-icon
									name="bi-gear-fill"
									style="font-size: 30px"
									class="icon"
								/>
							</div>

							<p class="text-bold q-mt-lg">BP Admin Manager</p>
						</div>
					</q-card>
					<q-card class="moduleCon">
						<div
							class="column items-center justify-end q-pa-sm"
							style="height: 100%"
						>
							<p class="text-bold">BP Recipe manager</p>
						</div>
					</q-card>
					<q-card class="moduleCon">
						<div
							class="column items-center justify-end q-pa-sm"
							style="height: 100%"
						>
							<p class="text-bold">BP DMS Judge Client</p>
						</div>
					</q-card>
					<q-card class="moduleCon">
						<div
							class="column items-center justify-end q-pa-sm"
							style="height: 100%"
						>
							<p class="text-bold">BP DMS Monitor</p>
						</div>
					</q-card>
				</div>
			</Transition>
		</q-page>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
</script>

<style scoped>
.moduleCon {
	width: 210px;
	height: 250px;
	background: rgba(255, 255, 255, 0.521);
	box-shadow: 0px 4px 12px 3px #a7b1fd1e;

	border-radius: 2px;
}

/* Transition 관련 CSS */
.slide-fade-enter-active {
	/* transition: all 0.3s ease-out; */
	transition: all 2s;
}

.slide-fade-leave-active {
	/* transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1); */
}

.slide-fade-enter-from,
.slide-fade-leave-to {
	transform: translateX(-30px);
	opacity: 0;
}
</style>

 

<Transition name="slide-fade" appear> 의 name을 class이름과 같은걸로 사용 해준다

 

---

 

참고한 quasar 공식 사이트 문서

https://quasar.dev/options/animations

Animations | Quasar Framework