第五块 vue动画和过度

vue关于组件的基础知识，理解组件的作用

由于渲染问题，代码展示有误，还请麻烦点击按钮进入GitHub查看，详细说明见第0块

vue中使用动画和过度

过度和动画概念

过度是状态变换的情况(颜色)

动画是指一个元素它运动的情况

操作还是和平时差不多的，只是操作class style的方式变了

动画左去右来

使用vue来操作DOM实现动画的效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 23</title>
    <style>
        /* 动画 */
        @keyframes leftToRight {
            0% {
                transform: translateX(-100px);
            }

            50% {
                transform: translateX(-50px);
            }

            0% {
                transform: translateX(0px);
            }
        }

        .animation {
            animation: leftToRight 3s;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                animate: {
                    animation: false,
                },
            }
        },
        methods: {
            handleClick() {
                this.animate.animation = !this.animate.animation;
            },
        },
        template: `
      <div>
        <div :class="animate">hello world</div>
        <button @click="handleClick">切换</button>
      </div>
    });
    const vm = app.mount('#root');
</script>

</html>

过度

样式颜色渐变

同样是使用vue来操作DOM实现动画的效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 23</title>
    <style>
        .transition {
            transition: 3s background-color ease;
        }

        .blue {
            background: blue;
        }

        .green {
            background: green;
        }

        .transition {
            transition: 3s background-color ease;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<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 world</div>
        <button @click="handleClick">切换</button>
      </div>
    `
    });
    const vm = app.mount('#root');
</script>

</html>

对象颜色渐变

这里是直接使用对象的方式来操作DOM

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 23</title>
    <style>
        .transition {
            transition: 3s background-color ease;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                styleObj: {
                    background: 'blue'
                }
            }
        },
        methods: {
            handleClick() {
                if (this.styleObj.background === 'blue') {
                    this.styleObj.background = 'green';
                } else {
                    this.styleObj.background = 'blue';
                }
            }
        },
        template: `
      <div>
        <div class="transition" :style="styleObj">hello world</div>
        <button @click="handleClick">切换</button>
      </div>
    `
    });

    const vm = app.mount('#root');
</script>

</html>

单元素的入场出场动画

动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 24</title>
    <style>
        @keyframes shake {
            0% {
                transform: translateX(-100px)
            }

            50% {
                transform: translateX(-50px)
            }

            100% {
                transform: translateX(50px)
            }
        }

        .v-leave-active {
            animation: shake 3s;
        }

        .v-enter-active {
            animation: shake 3s;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    // 单元素，单组件的入场出场动画
    const app = Vue.createApp({
        data() {
            return {
                show: false
            }
        },
        methods: {
            handleClick() {
                this.show = !this.show;
            }
        },
        template: `
      <div>
        <transition>
          <div v-if="show">hello world</div>
        </transition>
        <button @click="handleClick">切换</button>
      </div>
    `
    });

    const vm = app.mount('#root');
</script>

</html>

起别名

.v-enter-active -> .hello-enter-active

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 24</title>
    <style>
        @keyframes shake {
            0% {
                transform: translateX(-100px)
            }

            50% {
                transform: translateX(-50px)
            }

            100% {
                transform: translateX(50px)
            }
        }

        .hello-leave-active {
            animation: shake 3s;
        }

        .hello-enter-active {
            animation: shake 3s;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                show: false
            }
        },
        methods: {
            handleClick() {
                this.show = !this.show;
            }
        },
        template: `
      <div>
        <transition name="hello">
          <div v-if="show">hello world</div>
        </transition>
        <button @click="handleClick">切换</button>
      </div>
    `
    });

    const vm = app.mount('#root');
</script>

</html>

过度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 24</title>
    <style>
        .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;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                show: false
            }
        },
        methods: {
            handleClick() {
                this.show = !this.show;
            }
        },
        template: `
      <div>
        <transition>
          <div v-if="show">hello world</div>
        </transition>
        <button @click="handleClick">切换</button>
      </div>
    `
    });

    const vm = app.mount('#root');
</script>

</html>

自定义css别名

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson 24</title>
    <style>
        @keyframes shake {
            0% {
                transform: translateX(-100px)
            }

            50% {
                transform: translateX(-50px)
            }

            100% {
                transform: translateX(50px)
            }
        }

        .bye {
            animation: shake 3s;
        }

        .hello {
            animation: shake 3s;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                show: false
            }
        },
        methods: {
            handleClick() {
                this.show = !this.show;
            }
        },
        template: `
      <div>
        <transition 
        enter-active-class="hello"
        leave-active-class="bye">
          <div v-if="show">hello world</div>
        </transition>
        <button @click="handleClick">切换</button>
      </div>
    `
    });

    const vm = app.mount('#root');
</script>

</html>

体验animateCSS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入animate CSS库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"\>
    <title>lesson 24</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                show: false
            }
        },
        methods: {
            handleClick() {
                this.show = !this.show;
            }
        },
        template: `
      <div>
        <transition 
        enter-active-class="animate__animated animate__bounce"
        leave-active-class="animate__animated animate__bounce">
          <div v-if="show">hello world</div>
        </transition>
        <button @click="handleClick">切换</button>
      </div>
    `
    });

    const vm = app.mount('#root');
</script>

</html>

动画和过度时间控制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入animate CSS库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <title>lesson 24</title>
    <style>
        @keyframes shake {
            0% {
                transform: translateX(-100px)
            }

            50% {
                transform: translateX(-50px)
            }

            100% {
                transform: translateX(50px)
            }
        }
        .v-enter-from{
            color: red;
        }
        .v-enter-active {
            animation: shake 3s;
            transition: color 3s ease-in;
        }

        .v-leave-active {
            color: red;
            animation: shake 10s;
            transition: color 3s ease-in;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                show: false
            }
        },
        methods: {
            handleClick() {
                this.show = !this.show;
            }
        },
        template:
        // 以type="transition"  transition时间为准
        //<transition :duration="{enter:1000,leave:3000}">
        `
      <div>
        <transition type="transition">
          <div v-if="show">hello world</div>
        </transition>
        <button @click="handleClick">切换</button>
      </div>
    `
    });

    const vm = app.mount('#root');
</script>

</html>

PREVIOUS第四节 Go基础容器

NEXT第五节 golang之go 命令用法