added animations and pageLoad and preLoader

pages/_lang/blog/_post.vue

@@ -79,6 +79,11 @@
             else return date.split(' ')[0]
          },
       },
+      head() {
+         return {
+            title: this.post.post_details[this.$route.params.lang].title
+         }
+      },
       async asyncData({$axios, params}) {
          const post = await $axios.get(`/api/public/blog/${params.post}`)
          const blogCategories = await $axios.get(`/api/public/blogCategories`)

pages/_lang/blog/index.vue

@@ -13,11 +13,11 @@
 			<div class="container">
 				<div class="row">
 					<div class="col-12">
-						<div class="filters">
+						<div class="filters anim-fadeIn">
 							<h2 class="title">{{staticData.t3}}</h2>
 							<ul>
 								<li @click="filtering(false)">
-									<p class="active">همه</p>
+									<p class="active">{{staticData.t7}}</p>
 								</li>
 								<li v-for="item in blogCategories" :key="item._id" @click="filtering(item._id)">
 									<p>{{item.blogCategory_details[$route.params.lang].name}}</p>
@@ -31,9 +31,9 @@
 		
 		<section class="s3">
 			<div class="container">
-				<div class="row" v-if="filtered_posts.length">
+				<div class="row posts-container" v-if="filtered_posts.length">
 					
-					<div class="col-12 clearfix post" v-for="item in filtered_posts" :key="item._id">
+					<div class="col-12 col-sm-6 col-lg-12 clearfix post anim-fadeIn" v-for="item in filtered_posts" :key="item._id">
 						<div class="panel">
 							<div class="imgBox imgBox-reverse">
 								<div class="img">
@@ -58,7 +58,7 @@
 				</div>
 				<div class="row" v-else>
 					<div class="col-12">
-						<p class="no-post">هیچ پستی در این دسته بندی موجود نمیباشد.</p>
+						<p class="no-post posts-container anim-fadeIn">{{staticData.t6}}</p>
 					</div>
 				</div>
 			</div>
@@ -68,6 +68,7 @@
 
 <script>
    import moment from 'moment-jalaali'
+   import {fadeInAnimation} from "~/mixins/animations"
 
    export default {
       data() {
@@ -95,9 +96,27 @@
             else return date.split(' ')[0]
          },
          filtering(key) {
-            this.filter = key
             $('.blog--page .filters p').removeClass('active')
             $(event.target).addClass('active')
+
+            this.$gsap.timeline({
+               yoyo: true,
+               repeat: 1
+            })
+               .to($('.blog--page .posts-container'),
+                  {
+                     opacity: 0,
+                     duration: 0.3,
+                     onComplete: () => {
+                        this.filter = key
+                     }
+                  })
+         }
+      },
+      mixins: [fadeInAnimation],
+      head() {
+         return {
+            title: this.staticData.hero
          }
       },
       async asyncData({$axios, store}) {