[FEATURE] Adding the animation for the zoom on click

src/assets/less/home.less

@@ -7,7 +7,7 @@
 	.full();
 
 	& > div {
-		.transition(transform 0.5s cubic-bezier(0.8, 0, 0.25, 1));
+		.transition(transform 0.5s cubic-bezier(0.8, 0, 0.25, 1) 0.08s);
 
 		perspective: 1000px;
 		height: 100%;

src/components/introduction/introduction_link.vue

@@ -15,14 +15,8 @@ export default {
 		}
 	},
 	methods: {
-		open: function(direction) {
-			this.goPortfolio = true;
-			setTimeout(() => {
-				this.goZoom = true;
-				setTimeout(() => {
-					return direction == 'portfolio' ? this.$router.push('portfolio') : this.$router.push('articles');
-				}, 500);
-			}, 500);
+		open: function(link) {
+			this.$emit(link);
 		}
 	}
 };

src/components/introduction/introduction_side.vue

@@ -1,9 +1,12 @@
 <template>
 	<div
-		:class="props_link.side"
+		:class="[props_link.side,{active:props_go_open_door}]"
 		class="bloc">
 		<components_introduction :props_introduction="props_introduction" />
-		<components_introduction_link :props_link="props_link" />
+		<components_introduction_link
+			:props_link="props_link"
+			@articles="articles"
+			@portfolio="portfolio" />
 	</div>
 </template>
 <script>
@@ -23,6 +26,27 @@ export default {
 		props_link: {
 			type: Object,
 			required: true
+		},
+		props_go_open_door: {
+			type: Boolean,
+			required: true
+		}
+	},
+	methods: {
+		articles() {
+			this.animation_door('articles');
+		},
+		portfolio() {
+			this.animation_door('portfolio');
+		},
+		animation_door(link) {
+			this.$emit('zoom');
+			this.move_to_project(link, 1000);
+		},
+		move_to_project(link, delay) {
+			setTimeout(() => {
+				this.$router.push(link);
+			}, delay);
 		}
 	}
 };