init

2023-05-01 19:37:40 +08:00
commit da2c0fadf7
133 changed files with 29002 additions and 0 deletions
--- a/Html-Vue/vue-过度.html
+++ b/Html-Vue/vue-过度.html
@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        /* @keyframes leftToRight {
+            0% {
+                transform: translateX(-100px);
+            }
+            50% {
+                transform: translateX(-50px);
+            }
+            0%  {
+                transform: translateX(0px);
+            }
+        }
+        .animation {
+            animation: leftToRight 3s;
+        } */
+        /* .transition {
+            transition: 3s background-color ease;
+        }
+
+        .blue {
+            background:blue;
+        }
+        .green {
+            background:green;
+        } */
+
+
+
+
+        /* 出场过度 */
+        /* .v-enter-from {
+            opacity: 0;
+        }
+        .v-enter-active {
+            transition: opacity 3s ease-out;
+        }
+        .v-enter-to {
+            opacity: 1;
+        } */
+
+
+        /* 退场过度 */
+        /* .v-leave-from {
+            opacity: 1;
+        } */
+        /* .v-leave-active {
+            transition: opacity 3s ease-in;
+        }
+        .v-leave-to {
+            opacity: 0;
+        } */
+
+
+
+        @keyframes shake {
+            0% {
+                transform: translateX(-100px);
+            }
+
+            50% {
+                transform:translateX(-50px) ;
+            }
+            100% {
+                transform:translateX(50px) ;
+            }
+        }
+        .v-enter-active {
+            transition: opacity 3s ease-out;;
+        }
+        .v-enter-to {
+            opacity: 0;
+        }
+        .v-enter-active {
+            animation: shake 3s;
+        }
+
+    </style>
+    <title>Document</title>
+<script src="https://unpkg.com/vue@next"></script>
+</head>
+<body>
+    <div id="root"></div>
+
+<script>
+
+
+    //单纯过度
+    // const app = Vue.createApp({
+    //     data(){
+    //         return {
+    //             animate:{
+    //                 transition:true,
+    //                 blue:true,
+    //                 green:false
+                   
+    //             }
+    //         }
+    //     },
+    //     methods:{
+    //         handleClick(){
+    //             this.animate.blue=!this.animate.blue;
+    //             this.animate.green=!this.animate.green;
+
+
+    //         }
+    //     },
+
+    //     template: `
+    //     <div>
+    //         <div :class="animate">hello Vue</div>
+    //         <button @click="handleClick">切换</button>
+    //     </div>   
+    //     `     
+
+     
+    // });
+
+    // const vm = app.mount('#root');
+
+
+
+    //出场动画与退场动画
+    //单元素,但组件的入场动画
+    const app = Vue.createApp({
+        data(){
+            return {
+                show:false
+            }
+        },
+        methods:{
+            handleClick(){
+               this.show=!this.show; 
+            }
+        },
+
+        template: `
+        <div>
+            <transition>
+            <div v-if="show">hello Vue</div>
+            </transition>
+
+            <button @click="handleClick">切换</button>
+        </div>   
+        `     
+
+     
+    });
+
+    const vm = app.mount('#root');
+
+
+
+
+</script>
+
+</body>
+</html>