Update EditNote.vue

src/views/EditNote.vue

@@ -39,6 +39,13 @@
 }
 
 
+.fade-enter-active, .fade-leave-active {
+	transition: opacity .25s
+ }
+ .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
+	opacity: 0
+} 
+
 
 @media print {
 
@@ -74,12 +81,13 @@
             :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
 
           <Affix :offset-top="0">
-            <div :class="[showHeaderShade ? 'noteHeaderShade' : 'noteHeader']">
+            <div :class="[showHeaderShade ? 'noteHeaderShade' : 'noteHeader']" style="text-align: left;">
-
+              <transition name="fade">
-              <img style="height:40px;float:left;cursor: pointer;" alt="refresh flagnote" src="/static/logo.png"
+              <img v-show="!toTopState" style="height:40px;float:left;cursor: pointer;position: absolute;" alt="refresh flagnote" src="/static/logo.png"
                 v-on:click="refreshPage()" />
-
+              </transition>
-              <div style="float:left;width:auto;">
+              <transition name="fade">
+              <div style="float:left;width:auto;position: absolute">
 
                 <Button-group size="large">
 
@@ -88,11 +96,11 @@
                   <Button aria-label="to top" v-show="toTopState" type="text"
                     style="margin-left:5px; border-radius: 0px; font-size: 28px;color:red;line-height: 20px;"
                     @click="toTop()" icon="ios-arrow-up" ghost></Button>
-
+                 
                 </Button-group>
 
               </div>
-
+            </transition>
 
 
               <div style="float:right;width:auto;">