[add new card] onblur fix

SuperAL · May 14, 2016 · b77d52f · b77d52f
1 parent 06c6d03
commit b77d52f
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/src/components/new-card.vue b/src/components/new-card.vue
@@ -4,10 +4,10 @@
       <div class="card small white  valign-wrapper">
         <div class="addcard center">
           <!-- "+" -->
-          <i @click="clickPlus" v-show="!ifplusClicked" class="large mdi mdi-plus grey-text"></i>
+          <i @click="clickPlus" v-show="!ifplusClicked" transition="fade" class="large mdi mdi-plus grey-text"></i>
           <!-- card name input -->
-          <div class="input-field col s12" v-show="ifplusClicked">
-            <input @keyup.enter="newCard" id="card_name" type="text" v-model="cardName" v-name-focus="ifplusClicked">
+          <div class="input-field col s12" v-show="ifplusClicked" >
+            <input @keyup.enter="newCard" id="card_name" type="text" v-model="cardName" v-name-focus="ifplusClicked" @blur="ifplusClicked=false" >
             <label for="card_name">卡片命名</label>
           </div> 
 
@@ -71,6 +71,12 @@ export default {
 .addcard i{
   cursor: pointer;
 }
+.fade-enter{
+  transition: all .1s ease;
+}
+.fade-leave{
+  transition: all 0s ease;
+}
 </style>