<template>
	<view class="transition">
		<view :class="{animation: show, hidden: !show}">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			duration: {
				type: [Number, String],
				default: 300
			}
		},
		data() {
			return {
				showFade: false
			}
		}
	}
</script>

<style scoped>
	.transition {
		will-change: transform;
		width: 100vw;
		display: block;
	}

	.hidden {
		display: none;
		width: 100%;
	}

	.animation {
		animation: fade .3s ease forwards;
		opacity: 0;
		display: block;
		width: 100%;
	}

	@keyframes fade {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}
</style>
