使Mask组件具有过渡效果

.gitignore

@@ -0,0 +1,37 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history

README.md

@@ -22,3 +22,5 @@ npm run dev
 ## QQ群
 
 <a target="_blank" href="http://shang.qq.com/wpa/qunwpa?idkey=c735b2b5e7d83d2043584e78d1c9d0475f6064e82701ec01ed28e7aa163946ea"><img border="0" src="http://pub.idqqimg.com/wpa/images/group.png" alt="vue.js" title="vue.js"></a>
+
+## Mask更新

example/modules/DialogView.vue

@@ -8,7 +8,8 @@
         <a href="javascript:;" class="weui_btn weui_btn_primary" v-on:click="showAlert=true;">点击弹出Dialog Alert</a>
         <a href="javascript:;" class="weui_btn weui_btn_primary" v-on:click="showConfirm=true;">点击弹出Dialog Confirm</a>
     </div>
-
+    <mask :is-show.sync="showAlert"></mask>
+    <mask :is-show.sync="showConfirm"></mask>
     <Dialog :show.sync="showAlert"></Dialog>
 
     <Dialog :show.sync="showConfirm" type="confirm" title="弹窗标题">
@@ -23,12 +24,13 @@
 <script>
 
 import Dialog from './../../src/Dialog.vue'
+import Mask from './../../src/Mask.vue'
 
 export default {
     name: 'DialogView',
     components: {
-        Dialog
-        // Button
+        Dialog,
+        Mask
     },
     data() {
         return {

example/modules/IndexView.vue

@@ -103,7 +103,3 @@ export default {
   }
 }
 </script>
-
-<style lang="stylus">
-
-</style>

src/Dialog.vue

@@ -7,7 +7,7 @@
 <template>
 
 <div :class="'weui_dialog_' + type" v-show="show">
-    <div class="weui_mask"></div>
+
     <div class="weui_dialog">
         <div class="weui_dialog_hd">
             <strong class="weui_dialog_title">{{title}}</strong>
@@ -25,7 +25,6 @@
 </template>
 
 <script>
-
 export default {
     name: 'Dialog',
     props: {

src/Mask.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="weui_mask_transition" :class="{weui_fade_toggle:isShow}" id="mask" v-show="isShow" v-on:click="close()"></div>
+  <div class="weui_mask_transition" transition="maskts" :class="{weui_fade_toggle:isShow}" id="mask" v-show="isShow" v-on:click="close()"></div>
 </template>
 
 <script>
@@ -23,5 +23,4 @@ export default {
 <style lang="less">
 
 @import "./style/widget/weui_tips/weui_mask";
-
 </style>

src/style/widget/weui_tips/weui_mask.less

@@ -20,7 +20,6 @@
 }
 
 .weui_mask_transition{
-    display: none;
     position: fixed;
     z-index: 1;
     width: 100%;
@@ -32,4 +31,10 @@
 }
 .weui_fade_toggle{
     background: rgba(0,0,0,.6);
-}
+}
+.maskts{
+    background: rgba(0, 0, 0, .5);
+}
+.maskts-leave, .maskts-enter{
+    background: rgba(0, 0, 0, .0);
+}