added animations and pageLoad and preLoader

pages/_lang/products/index.vue

@@ -11,11 +11,11 @@
 		</section>
 		<section class="s2">
 			<div class="container">
-				<div class="filters">
+				<div class="filters anim-fadeIn">
 					<h2 class="title title-subtitle">{{staticData.s2.t1}}</h2>
 					<ul>
 						<li @click="filtering(false)">
-							<p class="active">همه</p>
+							<p class="active">{{staticData.s2.t3}}</p>
 						</li>
 						<li
 							v-for="item in productCategories"
@@ -25,11 +25,13 @@
 						</li>
 					</ul>
 				</div>
-				<div class="row" v-if="filtered_products.length">
+				<div class="row products-container" v-if="filtered_products.length">
 					
-					<div class="col-3 mb-5" v-for="item in filtered_products" :key="item._id">
+					<div class="col-12 col-sm-6 col-lg-4 col-xl-3 mb-5 anim-fadeIn" v-for="item in filtered_products" :key="item._id">
 						<nuxt-link :to="{name: 'lang-products-product',params: {lang: $route.params.lang,product: item._id}}" class="product">
-							<img :src="item.cover" :alt="item.product_details[$route.params.lang].name">
+							<div class="imgBox">
+								<img :src="item.cover" :alt="item.product_details[$route.params.lang].name">
+							</div>
 							<h4>{{item.product_details[$route.params.lang].name}}</h4>
 							<p>{{item.product_details[$route.params.lang].short_description}}</p>
 						</nuxt-link>
@@ -37,15 +39,15 @@
 				
 				</div>
 				<div class="row" v-else>
-					<div class="col-12">
-						<p class="no-product">هیچ محصولی در این دسته بندی موجود نمیباشد.</p>
+					<div class="col-12 products-container">
+						<p class="no-product anim-fadeIn">{{staticData.s2.t2}}</p>
 					</div>
 				</div>
 			</div>
 		</section>
 		<section class="s3">
 			<div class="container">
-				<div class="panel">
+				<div class="panel anim-fadeIn">
 					<h2 class="title title-shape-center">
 						{{staticData.s3.t1}}
 						<span class="subtitle">{{staticData.s3.t2}}</span>
@@ -59,6 +61,8 @@
 </template>
 
 <script>
+   import {fadeInAnimation} from "~/mixins/animations"
+
    export default {
       data() {
          return {
@@ -79,9 +83,27 @@
       },
       methods: {
          filtering(key) {
-            this.filter = key
             $('.products--page .filters p').removeClass('active')
             $(event.target).addClass('active')
+
+            this.$gsap.timeline({
+               yoyo: true,
+               repeat: 1
+            })
+               .to($('.products--page .products-container'),
+                  {
+                     opacity: 0,
+                     duration: 0.3,
+                     onComplete: () => {
+                        this.filter = key
+                     }
+                  })
+         }
+      },
+      mixins: [fadeInAnimation],
+      head() {
+         return {
+            title: this.staticData.hero
          }
       },
       async asyncData({$axios, store}) {