From 3f7985ed2e600f612108601bab1cb9ff9e3b6d90 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Fri, 3 Nov 2017 07:13:18 -0500
Subject: [PATCH] [bugfix] NoticeBar text disappeared when page back (#280)

* [bugfix] CouponList always show empty info

* [bugfix] add click feedback of buttons in components

* [Doc] add custom theme document

* [new feature] Notice bar support more props

* [bugfix] PullRefresh test cases

* [bugfix] unused NoticeBar style

* [bugfix] Swipe width calc error

* [Doc] english document of all action components

* [Doc] change document site path to /zanui/vant

* [Doc] fix

* [bugfix] uploader style error

* [bugfix] tabs document demo

* [new feature] Cell support vue-router target route

* [bugfix] add cell test cases

* update yarn.lock

* [bugfix] Tabbar cann't display info when use icon slot

* [Doc] update document title

* [bugfix] Dialog should reset button text when showed

* [new feature] CouponList add showCloseButton prop

* [new feature] Swipe add 'initialSwipe' prop

* [bugfix] NoticeBar text disappeared when page back
---
 docs/examples-docs/zh-CN/notice-bar.md |  1 +
 packages/notice-bar/index.vue          | 34 ++++++++++++++------------
 packages/vant-css/src/notice-bar.css   | 21 ++++++++++++++--
 3 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/docs/examples-docs/zh-CN/notice-bar.md b/docs/examples-docs/zh-CN/notice-bar.md
index b41b06cee..4eaeccbfb 100644
--- a/docs/examples-docs/zh-CN/notice-bar.md
+++ b/docs/examples-docs/zh-CN/notice-bar.md
@@ -21,6 +21,7 @@ Vue.component(NoticeBar.name, NoticeBar);
 
 :::demo 基础用法
 ```html
+<van-notice-bar text="测试测试。"></van-notice-bar>
 <van-notice-bar
   text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
   left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
diff --git a/packages/notice-bar/index.vue b/packages/notice-bar/index.vue
index bc3d9667b..db709a718 100644
--- a/packages/notice-bar/index.vue
+++ b/packages/notice-bar/index.vue
@@ -9,7 +9,12 @@
       <img :src="leftIcon" />
     </div>
     <div class="van-notice-bar__content-wrap" ref="contentWrap">
-      <div class="van-notice-bar__content" ref="content" :style="contentStyle" @transitionend="onTransitionEnd">
+      <div
+        ref="content"
+        :class="['van-notice-bar__content', animationClass]"
+        :style="contentStyle"
+        @animationend="onAnimationEnd"
+      >
         <slot>{{ text }}</slot>
       </div>
     </div>
@@ -55,11 +60,12 @@ export default {
 
   data() {
     return {
+      wrapWidth: 0,
       firstRound: true,
       duration: 0,
       offsetWidth: 0,
       showNoticeBar: true,
-      diableTransition: false
+      animationClass: ''
     };
   },
 
@@ -75,9 +81,9 @@ export default {
     },
     contentStyle() {
       return {
-        transform: `translate3d(${-this.offsetWidth}px, 0, 0)`,
-        transitionDelay: (this.firstRound ? this.delay : 0) + 's',
-        transitionDuration: this.duration + 's'
+        paddingLeft: this.firstRound ? 0 : this.wrapWidth + 'px',
+        animationDelay: (this.firstRound ? this.delay : 0) + 's',
+        animationDuration: this.duration + 's'
       };
     }
   },
@@ -88,7 +94,8 @@ export default {
     if (this.scrollable && offsetWidth > wrapWidth) {
       this.wrapWidth = wrapWidth;
       this.offsetWidth = offsetWidth;
-      this.duration = (offsetWidth + wrapWidth) / this.speed;
+      this.duration = offsetWidth / this.speed;
+      this.animationClass = 'van-notice-bar__play';
     }
   },
 
@@ -96,17 +103,12 @@ export default {
     onClickIcon() {
       this.showNoticeBar = this.mode !== 'closeable';
     },
-    onTransitionEnd() {
-      const { offsetWidth, wrapWidth } = this;
+    onAnimationEnd() {
       this.firstRound = false;
-      this.duration = 0;
-      this.offsetWidth = -this.wrapWidth;
-
-      // wait for vue render && dom update
-      setTimeout(() => {
-        this.duration = (offsetWidth + 2 * wrapWidth) / this.speed;
-        this.offsetWidth = offsetWidth;
-      }, 50);
+      this.$nextTick(() => {
+        this.duration = (this.offsetWidth + this.wrapWidth) / this.speed;
+        this.animationClass = 'van-notice-bar__play--infinite';
+      });
     }
   }
 };
diff --git a/packages/vant-css/src/notice-bar.css b/packages/vant-css/src/notice-bar.css
index 8d0da9a7e..35436facb 100644
--- a/packages/vant-css/src/notice-bar.css
+++ b/packages/vant-css/src/notice-bar.css
@@ -32,7 +32,6 @@
     position: absolute;
     font-size: 15px;
     line-height: 1;
-    cursor: pointer;
   }
 
   &__content-wrap {
@@ -45,6 +44,24 @@
   &__content {
     position: absolute;
     white-space: nowrap;
-    transition: all linear;
+  }
+
+  &__play {
+    animation: van-notice-bar-play linear both;
+  }
+
+  &__play--infinite {
+    animation: van-notice-bar-play-infinite linear infinite both;
   }
 }
+
+/** 
+ * Declare two same keyframes
+ * In case that some mobile browsers can continue animation when className changed
+ */
+@keyframes van-notice-bar-play {
+  to { transform: translate3d(-100%, 0, 0) }
+}
+@keyframes van-notice-bar-play-infinite {
+  to { transform: translate3d(-100%, 0, 0) }
+}