fix(tabs,notice-bar): improve transition performance & improve notice…

…-bar's performance with dynamic slot content (didi#631)

* fix(tab-pane): fix some transition performance in some platforms

fix didi#627

* fix(notice-bar): fix immutable slot

fix didi#628

* example(notice-bar): add a new demo

components/notice-bar/demo/cases/demo8.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="md-example-child md-example-child-notice-bar md-example-child-notice-bar-7">
+    <md-notice-bar scrollable>
+      <md-icon slot="left" class="md-notice-demo-icon md-notice-demo-icon-left" name="security"></md-icon>
+      {{ content }}
+    </md-notice-bar>
+  </div>
+</template>
+
+<script>import {NoticeBar, Icon} from 'mand-mobile'
+import {setTimeout} from 'timers'
+
+export default {
+  name: 'notice-bar-demo',
+  /* DELETE */
+  title: '动态插槽内容',
+  titleEnUS: 'Dynamic slot content',
+  background: '#fff',
+  /* DELETE */
+  components: {
+    [NoticeBar.name]: NoticeBar,
+    [Icon.name]: Icon,
+  },
+  data() {
+    return {
+      content: '为了确保您的资金安全，请设置支付密码',
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.content = '为了确保您的资金安全，请设置支付密码;为了确保您的资金安全，请设置支付密码'
+    }, 2000)
+
+    setTimeout(() => {
+      this.content = '为了确保您的资金安全，请设置支付密码'
+    }, 8000)
+  },
+}
+</script>

components/notice-bar/demo/index.vue

@@ -19,6 +19,7 @@ import Demo4 from './cases/demo4'
 import Demo5 from './cases/demo5'
 import Demo6 from './cases/demo6'
 import Demo7 from './cases/demo7'
+import Demo8 from './cases/demo8'
 
-export default {...createDemoModule('notice-bar', [Demo0, Demo1, Demo2, Demo3, Demo4, Demo5, Demo6, Demo7])}
+export default {...createDemoModule('notice-bar', [Demo0, Demo1, Demo2, Demo3, Demo4, Demo5, Demo6, Demo7, Demo8])}
 </script>

components/notice-bar/index.vue

@@ -147,7 +147,18 @@ export default {
       if (!wrap || !content) {
         return
       }
-      this.overflow = content.scrollWidth > wrap.clientWidth
+      /**
+       * 计算 padding-left 对宽度的影响
+       * 替换 clientWidth 为 getBoundingClientRect
+       */
+      const paddingLeft =
+        window
+          .getComputedStyle(content, null)
+          .getPropertyValue('padding')
+          .split(' ')[3] || '0px'
+      const left = +paddingLeft.match(/\d+/g)[0]
+
+      this.overflow = content.scrollWidth - left > Math.ceil(wrap.getBoundingClientRect().width)
     },
   },
 }

components/tabs/tab-pane.vue

@@ -67,6 +67,7 @@
 .md-tab-pane
   position relative
   width 100%
+  transform translateZ(0)
 
 .md-tab-slide-left,
 .md-tab-slide-right