From d21420b7d2357c4c0b47bc0f38b48e57d7fd9b81 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sat, 30 May 2020 21:16:37 +0800
Subject: [PATCH] fix(NoticeBar): scroll failed after activated

---
 src/notice-bar/index.js                       | 28 +++++++++++--------
 .../test/__snapshots__/demo.spec.js.snap      | 12 ++++----
 .../test/__snapshots__/index.spec.js.snap     |  2 +-
 3 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/notice-bar/index.js b/src/notice-bar/index.js
index 039d3c8bb..a2a95fd78 100644
--- a/src/notice-bar/index.js
+++ b/src/notice-bar/index.js
@@ -32,7 +32,6 @@ export default createComponent({
       offset: 0,
       duration: 0,
       wrapWidth: 0,
-      firstRound: true,
       contentWidth: 0,
     };
   },
@@ -45,6 +44,10 @@ export default createComponent({
     },
   },
 
+  activated() {
+    this.start();
+  },
+
   methods: {
     onClickIcon(event) {
       if (this.mode === 'closeable') {
@@ -56,7 +59,6 @@ export default createComponent({
     onTransitionEnd() {
       this.offset = this.wrapWidth;
       this.duration = 0;
-      this.firstRound = false;
 
       doubleRaf(() => {
         this.offset = -this.contentWidth;
@@ -66,13 +68,16 @@ export default createComponent({
     },
 
     reset() {
+      this.offset = 0;
       this.duration = 0;
       this.wrapWidth = 0;
       this.contentWidth = 0;
     },
 
     start() {
-      this.$nextTick(() => {
+      this.reset();
+
+      setTimeout(() => {
         const { wrap, content } = this.$refs;
         if (!wrap || !content) {
           return;
@@ -82,14 +87,14 @@ export default createComponent({
         const contentWidth = content.getBoundingClientRect().width;
 
         if (this.scrollable && contentWidth > wrapWidth) {
-          this.offset = -contentWidth;
-          this.duration = contentWidth / this.speed;
-          this.wrapWidth = wrapWidth;
-          this.contentWidth = contentWidth;
-        } else {
-          this.reset();
+          doubleRaf(() => {
+            this.offset = -contentWidth;
+            this.duration = contentWidth / this.speed;
+            this.wrapWidth = wrapWidth;
+            this.contentWidth = contentWidth;
+          });
         }
-      });
+      }, this.delay * 1000);
     },
   },
 
@@ -102,8 +107,7 @@ export default createComponent({
     };
 
     const contentStyle = {
-      transform: `translateX(${this.offset}px)`,
-      transitionDelay: (this.firstRound ? this.delay : 0) + 's',
+      transform: this.offset ? `translateX(${this.offset}px)` : '',
       transitionDuration: this.duration + 's',
     };
 
diff --git a/src/notice-bar/test/__snapshots__/demo.spec.js.snap b/src/notice-bar/test/__snapshots__/demo.spec.js.snap
index 12bbba34e..8850bc726 100644
--- a/src/notice-bar/test/__snapshots__/demo.spec.js.snap
+++ b/src/notice-bar/test/__snapshots__/demo.spec.js.snap
@@ -6,34 +6,34 @@ exports[`renders demo correctly 1`] = `
     <div role="alert" class="van-notice-bar"><i class="van-icon van-icon-volume-o van-notice-bar__left-icon">
         <!----></i>
       <div role="marquee" class="van-notice-bar__wrap">
-        <div class="van-notice-bar__content" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
+        <div class="van-notice-bar__content" style="transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
       </div>
     </div>
   </div>
   <div>
     <div role="alert" class="van-notice-bar">
       <div role="marquee" class="van-notice-bar__wrap">
-        <div class="van-notice-bar__content van-ellipsis" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
+        <div class="van-notice-bar__content van-ellipsis" style="transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
       </div>
     </div>
   </div>
   <div>
     <div role="alert" class="van-notice-bar van-notice-bar--wrapable">
       <div role="marquee" class="van-notice-bar__wrap">
-        <div class="van-notice-bar__content" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
+        <div class="van-notice-bar__content" style="transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
       </div>
     </div>
   </div>
   <div>
     <div role="alert" class="van-notice-bar">
       <div role="marquee" class="van-notice-bar__wrap">
-        <div class="van-notice-bar__content" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
+        <div class="van-notice-bar__content" style="transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
       </div><i class="van-icon van-icon-cross van-notice-bar__right-icon">
         <!----></i>
     </div>
     <div role="alert" class="van-notice-bar">
       <div role="marquee" class="van-notice-bar__wrap">
-        <div class="van-notice-bar__content" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
+        <div class="van-notice-bar__content" style="transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
       </div><i class="van-icon van-icon-arrow van-notice-bar__right-icon">
         <!----></i>
     </div>
@@ -42,7 +42,7 @@ exports[`renders demo correctly 1`] = `
     <div role="alert" class="van-notice-bar" style="color: rgb(25, 137, 250); background: rgb(236, 249, 255);"><i class="van-icon van-icon-info-o van-notice-bar__left-icon">
         <!----></i>
       <div role="marquee" class="van-notice-bar__wrap">
-        <div class="van-notice-bar__content" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
+        <div class="van-notice-bar__content" style="transition-duration: 0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
       </div>
     </div>
   </div>
diff --git a/src/notice-bar/test/__snapshots__/index.spec.js.snap b/src/notice-bar/test/__snapshots__/index.spec.js.snap
index 37d112ac5..e765e651e 100644
--- a/src/notice-bar/test/__snapshots__/index.spec.js.snap
+++ b/src/notice-bar/test/__snapshots__/index.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`icon slot 1`] = `
 <div role="alert" class="van-notice-bar">Custom Left Icon<div role="marquee" class="van-notice-bar__wrap">
-    <div class="van-notice-bar__content" style="transform: translateX(0px); transition-delay: 1s; transition-duration: 0s;">
+    <div class="van-notice-bar__content" style="transition-duration: 0s;">
       Content
     </div>
   </div>Custom Right Icon</div>