Pop component submission success failure animation

Realization function

Suppose we want to click... In a component , Then the page jumps to another component , Display the contents of another component .

Implementation method

There are currently two components ,App.vue and popup.vue
The first one is ： stay App.vue Introgression popup.vue, Then go straight through ref The way and popup signal communication
The second kind ： stay App.vue Add dynamically in :submitData attribute , Back submitData Can be a value of a binding

// adopt this.$refs.pop Can get popup Components , So in App.vue Yeah popup Component values , stay popup.vue in v-if
// The second is through binding attributes , signify popup.vue There are submitData attribute , Still use v-if
<popup ref="pop" :submitData="submitData"></popup>

popup.vue

<template>
	<div class="popup">
		<div class="success">
		// The second method is used here 
			<div v-if="submitData.valid">
			//svg The style of drawing checkmarks 
				<svg width="120" height="120" viewBox="0 0 40 40">
					<circle cx="50%" cy="50%" r="19" class="validCircle"></circle>
					<polyline points="5,20 15,30 35 10" class="hookmark" ></polyline>
				</svg>
			</div>
			//svg Cross style 
			<div v-if="!submitData.valid">
				<svg width="120" height="120" viewBox="0 0 40 40">
					<circle cx="50%" cy="50%" r="19" class="invalidCircle"></circle>
					<line x1="10" y1="10" x2="30" y2="30" class="hookmark"></line>
					<line x1="30" y1="10" x2="10" y2="30" class="hookmark"></line>
				</svg>
			</div>
			<div v-if="submitData.valid" class="submit_success"> Submit successfully </div>
			<div v-if="!submitData.valid" class="submit_success"> Submit failed </div>
			<div v-if="submitData.valid" class="ID_number">ID:{
   { submitData.id }}</div>
			<div v-if="!submitData.valid" class="ID_number" style="padding:1.5em .7em;color:var(--gray-dark)">Message:{
   { submitData.message }}</div>
			<div class="link">
				<a href="#" alt="home" style="padding-right: 6em"> Back to the home page </a>
				<a href="#" alt="detail" style="padding-left: 6em"> Check the details </a>
			</div>
		</div>
	</div>
</template>

css Code ：

<style scoped> .popup {
    
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	justify-content: center;
	background-color: var(--white);
	z-index: 9999;
}
.success {
    
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.submit_success {
    
	font-size: 1.2em;
	padding-top: 1em;
}
.ID_number {
    
	font-size: 1.5em;
	padding: 1.5em 0em;
	color: var(--green);
}
.link a {
    
	text-decoration: none;
	color: var(--accent);
}
.hookmark {
    
	stroke-dasharray: 100 100;
	stroke-dashoffset: 100;
	animation: 0.5s linear hookmarkTransform forwards 0.2s;
	fill: none;
	stroke: var(--white);
	stroke-width: 1px;
}
.validCircle {
    
	stroke: var(--green-bright);
	stroke-width: 2px;
	fill: var(--green-bright);
	stroke-dasharray: 320;
}
.invalidCircle {
    
	stroke: var(--red-bright);
	stroke-width: 2px;
	fill: var(--red-bright);
	stroke-dasharray: 320;
}
// Tick animation 
@keyframes hookmarkTransform {
    
	from {
    
		stroke-dasharray: 100 100;
		stroke-dashoffset: 100;
	}
	to {
    
		stroke-dasharray: 100 100;
		stroke-dashoffset: 0;
	}
}
</style>