添加阴影与显隐过渡

src/App.vue

@@ -1,7 +1,9 @@
 <template>
   <router-view />
   <teleport to="body">
-    <ToastComp v-if="isShowToast" />
+    <Transition name="toast-transition">
+      <ToastComp v-if="isShowToast" />
+    </Transition>
   </teleport>
 </template>
 
@@ -58,7 +60,16 @@ input, textarea {
 // ::-webkit-scrollbar-thumb { background: #828a5b; border-radius: 0.15rem; }
 // ::-webkit-scrollbar-corner { background: #dddecc; }
 
-// vue组件过渡效果
+/**
+ * vue组件过渡效果
+ */
+.fade-in-enter-active {
+  transition: opacity 1s;
+}
+.fade-in-enter-from {
+  opacity: 0;
+}
+
 .fade-out-leave-active {
   transition: opacity 1s;
 }
@@ -66,6 +77,26 @@ input, textarea {
   opacity: 0;
 }
 
+.tool-fade-in-out-enter-active {
+  transition: opacity 0.5s;
+}
+.tool-fade-in-out-leave-active {
+  transition: opacity 0.5s;
+}
+.tool-fade-in-out-enter-from {
+  opacity: 0 !important;
+}
+.tool-fade-in-out-leave-to {
+  opacity: 0 !important;
+}
+
+.toast-transition-leave-active {
+  transition: opacity 0.5s;
+}
+.toast-transition-leave-to {
+  opacity: 0;
+}
+
 // 不断渐变显隐 animation
 .animation-show-hide {
   animation: show-hide 1.8s infinite;

src/router/index.js

@@ -6,6 +6,10 @@ import DrawView from "@/views/DrawView.vue"
 
 const routes = [
   {
+    path: '/',
+    redirect: '/start',
+  },
+  {
     path: '/start',
     name: 'StartView',
     component: StartView,

src/store/index.js

@@ -60,14 +60,19 @@ export const selectedToolNum = computed(() => {
 
 export const workState = ref('init') // init, working, done
 
-export const toastTxt = ref('ksfsdfl')
+export const toastTxt = ref('')
 export const isShowToast = ref(false)
+let toastTimeoutId = null
 export function showToast(txt) {
   toastTxt.value = txt
   isShowToast.value = true
-  setTimeout(() => {
+  if (toastTimeoutId) {
+    clearTimeout(toastTimeoutId)
+  }
+  toastTimeoutId = setTimeout(() => {
     isShowToast.value = false
-  }, 2000)
+    toastTimeoutId = null
+  }, 1000)
 }
 
 export default createStore({

src/views/DrawView.vue

@@ -29,27 +29,33 @@
       v-if="curStepIdx === 5"
     />
 
-    <tool-list
-      v-show="workState === 'init' && curStepIdx !== 5"
-      class="tool-list"
-      :current-step-info="currentStepInfo"
-    />
-    <button
-      v-show="workState === 'done' && curStepIdx !== 5"
-      class="next"
-      @click="onClickNext"
-    >
-      下一步
-    </button>
-    <div
-      v-show="curStepIdx === 5"
-      class="btn-group"
-    >
-      <button @click="onClickReplay">
-        重新体验
+    <Transition name="tool-fade-in-out">
+      <tool-list
+        v-show="workState === 'init' && curStepIdx !== 5"
+        class="tool-list"
+        :current-step-info="currentStepInfo"
+      />
+    </Transition>
+    <Transition name="tool-fade-in-out">
+      <button
+        v-show="workState === 'done' && curStepIdx !== 5"
+        class="next"
+        @click="onClickNext"
+      >
+        下一步
       </button>
-      <button>分享</button>
-    </div>
+    </Transition>
+    <Transition name="tool-fade-in-out">
+      <div
+        v-show="curStepIdx === 5"
+        class="btn-group"
+      >
+        <button @click="onClickReplay">
+          重新体验
+        </button>
+        <button>分享</button>
+      </div>
+    </Transition>
   </div>
 </template>
 
@@ -74,7 +80,7 @@ const {
 inject('$uaInfo')
 inject('$env')
 
-const curStepIdx = ref(4)
+const curStepIdx = ref(0)
 
 const currentStepInfo = computed(() => {
   return config.stepList[curStepIdx.value]

src/views/StepView1.vue

@@ -15,16 +15,18 @@
       muted
       @ended="workState = 'done'"
     />
-    <img
-      v-show="workState === 'working'"
-      class="tool"
-      :style="{
-        animationPlayState: workState === 'working' ? 'running' : 'paused',
-      }"
-      :src="toolList[requiredToolList[0]].url"
-      alt=""
-      draggable="false"
-    >
+    <Transition name="tool-fade-in-out">
+      <img
+        v-show="workState === 'working'"
+        class="tool"
+        :style="{
+          animationPlayState: workState === 'working' ? 'running' : 'paused',
+        }"
+        :src="toolList[requiredToolList[0]].url"
+        alt=""
+        draggable="false"
+      >
+    </Transition>
   </div>
 </template>
 
@@ -76,6 +78,7 @@ watch(workState, (vNew) => {
     width: 100%;
     height: 100%;
     object-fit: contain;
+    box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.25);
   }
   >video{
     position: absolute;

src/views/StepView2.vue

@@ -31,16 +31,18 @@
       muted
       @ended="workState = 'done'"
     />
-    <img
-      v-show="workState === 'working'"
-      class="tool"
-      :style="{
-        animationPlayState: workState === 'working' ? 'running' : 'paused',
-      }"
-      :src="toolList[0].url"
-      alt=""
-      draggable="false"
-    >
+    <Transition name="tool-fade-in-out">
+      <img
+        v-show="workState === 'working'"
+        class="tool"
+        :style="{
+          animationPlayState: workState === 'working' ? 'running' : 'paused',
+        }"
+        :src="toolList[0].url"
+        alt=""
+        draggable="false"
+      >
+    </Transition>
   </div>
 </template>
 
@@ -92,6 +94,7 @@ watch(workState, (vNew) => {
     width: 100%;
     height: 100%;
     object-fit: contain;
+    box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.25);
   }
   >.copying-paper-bottom{
     position: absolute;
@@ -101,6 +104,7 @@ watch(workState, (vNew) => {
     height: 70%;
     background-color: rgba(31, 74, 114, 1);
     object-fit: contain;
+    box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.25);
   }
   >img.original-paint{
     position: absolute;
@@ -109,6 +113,7 @@ watch(workState, (vNew) => {
     width: 70%;
     height: 70%;
     object-fit: contain;
+    box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.25);
   }
   >.copying-paper-top{
     position: absolute;

src/views/StepView3.vue

@@ -23,16 +23,18 @@
       muted
       @ended="workState = 'done'"
     />
-    <img
-      v-show="workState === 'working'"
-      class="tool"
-      :style="{
-        animationPlayState: workState === 'working' ? 'running' : 'paused',
-      }"
-      :src="toolList[requiredToolList[0]].url"
-      alt=""
-      draggable="false"
-    >
+    <Transition name="tool-fade-in-out">
+      <img
+        v-show="workState === 'working'"
+        class="tool"
+        :style="{
+          animationPlayState: workState === 'working' ? 'running' : 'paused',
+        }"
+        :src="toolList[requiredToolList[0]].url"
+        alt=""
+        draggable="false"
+      >
+    </Transition>
   </div>
 </template>
 
@@ -83,6 +85,7 @@ watch(workState, (vNew) => {
     top: 0;
     width: 100%;
     height: 100%;
+    box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.25);
   }
   >img.rubber-board{
     position: absolute;
@@ -90,6 +93,7 @@ watch(workState, (vNew) => {
     top: 0;
     width: 100%;
     height: 100%;
+    box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.25);
   }
   >video{
     position: absolute;

src/views/StepView4.vue

@@ -56,16 +56,18 @@
       muted
       @ended="workState = 'done'"
     />
-    <img
-      v-show="workState === 'working' && innerState !== 0"
-      class="tool"
-      :style="{
-        animationPlayState: (workState === 'working' && innerState !== 0) ? 'running' : 'paused',
-      }"
-      :src="toolList[3].url"
-      alt=""
-      draggable="false"
-    >
+    <Transition name="tool-fade-in-out">
+      <img
+        v-show="workState === 'working' && innerState !== 0"
+        class="tool"
+        :style="{
+          animationPlayState: (workState === 'working' && innerState !== 0) ? 'running' : 'paused',
+        }"
+        :src="toolList[3].url"
+        alt=""
+        draggable="false"
+      >
+    </Transition>
   </div>
 </template>
 
@@ -126,6 +128,7 @@ watch(workState, (vNew) => {
     top: 0;
     width: 100%;
     // height: 100%;
+    box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.25);
   }
   >video.helper-board{
     position: absolute;
@@ -139,6 +142,7 @@ watch(workState, (vNew) => {
     left: 0;
     top: calc(168 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));;
     width: 100%;
+    box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.25);
   }
   >video.rubber-board{
     position: absolute;

src/views/StepView5.vue

@@ -19,16 +19,18 @@
       muted
       @ended="workState = 'done'"
     />
-    <img
-      v-show="workState === 'working'"
-      class="tool"
-      :style="{
-        animationPlayState: workState === 'working' ? 'running' : 'paused',
-      }"
-      :src="toolList[4].url"
-      alt=""
-      draggable="false"
-    >
+    <Transition name="tool-fade-in-out">
+      <img
+        v-show="workState === 'working'"
+        class="tool"
+        :style="{
+          animationPlayState: workState === 'working' ? 'running' : 'paused',
+        }"
+        :src="toolList[4].url"
+        alt=""
+        draggable="false"
+      >
+    </Transition>
   </div>
 </template>
 
@@ -79,6 +81,7 @@ watch(workState, (vNew) => {
     top: 0;
     width: 100%;
     height: 100%;
+    box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.25);
   }
   >.paper{
     position: absolute;
@@ -87,6 +90,7 @@ watch(workState, (vNew) => {
     width: 97%;
     height: 97.5%;
     background-color: #fff;
+    box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.25);
   }
   >video{
     position: absolute;