opactiy animation

twomiya · May 31, 2017 · 853e1da · 853e1da
1 parent e864d9b
commit 853e1da
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/src/components/common/shoplist.vue b/src/components/common/shoplist.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="shoplist_container">
-		<ul v-load-more="loaderMore" v-if="!shopListArr.length" type="1">
+		<ul v-load-more="loaderMore" v-if="shopListArr.length" type="1">
 			<router-link :to="{path: 'shop', query:{geohash, id: item.id}}" v-for="item in shopListArr" tag='li' :key="item.id" class="shop_li">
 				<section>
 					<img :src="imgBaseUrl + item.image_path" class="shop_img">
@@ -45,7 +45,7 @@
 				</hgroup>
 			</router-link>
 		</ul>
-		<ul v-else>
+		<ul v-else class="animation_opactiy">
 			<li class="list_back_li" v-for="item in 10" :key="item">
 				<img src="../../images/shopback.svg" class="list_back_svg">
 			</li>
@@ -206,7 +206,7 @@ export default {
 		margin-right: 0.4rem;
 	}
 	.list_back_li{
-		height: 5.85rem;
+		height: 4.85rem;
 		.list_back_svg{
 			@include wh(100%, 100%)
 		}

diff --git a/src/page/msite/msite.vue b/src/page/msite/msite.vue
@@ -25,7 +25,7 @@
 		        </div>
 		        <div class="swiper-pagination"></div>
 		    </div>
-		    <img src="../../images/fl.svg" class="fl_back" v-else>
+		    <img src="../../images/fl.svg" class="fl_back animation_opactiy" v-else>
     	</nav>
     	<div class="shop_list_container">
 	    	<header class="shop_header">

diff --git a/src/style/common.scss b/src/style/common.scss
@@ -96,4 +96,16 @@ html,body{
 
 .paddingTop{
     padding-top: 1.95rem;
+}
+
+@keyframes backOpacity{
+   0%   { opacity: 1 }
+   25%  { opacity: .5 }
+   50%  { opacity: 1 }
+   75%  { opacity: .5 }
+   100% { opacity: 1 }
+}
+
+.animation_opactiy{
+    animation: backOpacity 2s ease-in-out infinite;
 }