component.vue

<template lang="pug">
	.modal-overlay('@click'="closeDialog", ref="modalOverlay")
		.o-modal(@click="(e) => e.stopPropagation()", ref="modal")
			#carousel-content.owl-carousel.owl-theme(ref="carousel")
				img.img-content('v-for'="photo of project.photos" :src="'/static/img/projects/' + photo", alt='img')
			.project-info
				h2 {{project.name}}
				p.desc {{project.longDesc}}	
				ul.tags-holder
					li.o-tag('v-for'="tag of project.tags") {{tag}}
			button.close-btn(@click="closeDialog") &times;		

</template>

<style lang="scss">
.modal-overlay {
	position: fixed;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.5);
	top: 0;
	left: 0;
	z-index: 10;
	.o-modal {
		position: fixed;
		width: 80%;
		background: #fff;
		top: 10%;
		left: 10%;
		padding: 50px;
		display: flex;

		#carousel-content {
			width: 70%;

			@media screen and (max-width: 720px) {
				width: 100%;
			}

			.owl-nav {
				.owl-prev,
				.owl-next {
					border-radius: 50%;
					width: 25px;
					height: 25px;
				}
			}
			img.img-content {
				max-height: 60vh;
				max-width: 100%;
				margin: auto;
				object-fit: contain;
			}
		}
		.project-info {
			flex: 1;
			padding-left: 50px;
		}
	}
}
</style>

<script>
export default {
	name: 'project-modal',
	props: ['project'],
	mounted() {
		let $overlayAnimation = this.$refs.modalOverlay.animate([{
			opacity: 0
		},
		{
			opacity: 1
		},
		], {
				duration: 200,
				iterations: 1
			});

		$(this.$refs.carousel).owlCarousel({
			loop: true,
			margin: 10,
			nav: true,
			items: 1,
			navText: ['&#10094;', '&#10095;',]
		});
	},
	methods: {
		closeDialog(event) {
			let $modalAnimation = this.$refs.modal.animate([{
				opacity: 1,
				transform: 'scale(1)'
			},
			{
				opacity: 0,
				transform: 'scale(0)'
			},
			], {
					duration: 200,
					easing: 'linear',
					fill: 'forwards',
					iterations: 1
				});
			$overlayAnimation.onfinish = () => {
				this.$emit('closeDialog');
			}
		}
	},
	data() {
		return {

		}
	}
}
</script>