学习Vue日记第四天

最新推荐文章于 2024-08-02 18:34:10 发布

c木

最新推荐文章于 2024-08-02 18:34:10 发布

阅读量134

点赞数

本文链接：https://blog.csdn.net/qq_43061473/article/details/117537509

版权

Vue过渡和动画
Vue在插入、更新或者移除DOM时，提供过渡效果
transition组件

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <div id="app">
        <button @click="toggle">改变图形宽度</button>
        <transition name="box">
            <div class="chart" v-if="show"></div>
        </transition>
    </div>
    <style>
        .chart {
            width: 200px;
            height: 50px;
            background-color: orange;
        }

        .box-enter-active,
        .box-leave-active {
            transition: width 1s,height 2s, background-color 3s;
        }

        .box-enter,
        .box-leave-to {
            width: 0px;
            height: 0px;
            background-color: rgb(253, 253, 252);
        }

        .box-enter-to,
        .box-leave {
            width: 200px;
            height: 50px;
            background-color: orange;
        }
    </style>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                show: true,
            },
            methods: {
                toggle() {
                    this.show = !this.show
                }
            }
        })
    </script>
</body>

</html>

自定义类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <link rel="stylesheet" href="animate.css">
</head>
<body>
    <div id="app">
        <button @click="show=!show">显示/隐藏</button>
        <transition enter-active-class="animated bounceInLeft"
        leave-active-class="animated bounceOutLeft">
    <p v-if="show">过渡文字效果</p>
    </transition>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                show:true
            }
        })
    </script>
</body>
</html>

appear初始渲染

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <link rel="stylesheet" href="animate.css">
</head>

<body>
    <div id="app">
        <button @click="show=!show">显示/隐藏</button>
        <transition appear appear-active-class="animated swing" enter-active-class="animated bounceIn"
            leave-active-class="animated bounceOut">
            <div v-if="show">过渡文字效果</div>
        </transition>
    </div>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                show:true
            }
        })
    </script>
</body>

</html>

使用@keyframes创建CSS动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <link rel="stylesheet" href="animate.css">
</head>
<body>
    <div id="app">
        <button @click="show=!show">使用@keyframes创建CSS动画</button>
        <transition name="bounce">
            <div class="circular" v-if="show">圆形</div>
        </transition>
    </div>
    <style>
        div.circular{
            width: 100px;height: 100px;background: red;
            border-radius: 50%; margin-top:20px;text-align: center;//border-radius表示去边
            line-height: 100px; color: #fff;
        }
        .bounce-enter-active{
            animation: Ami .5s;
        }
        .bounce-leave-active{
            animation: Ami .5s;
        }
        @keyframes Ami{
            0%{
                transform: scale(0);background: red;
            }20%{
                transform: scale(1);background: burlywood;
            }50%{
                transform: scale(1.5);background: blueviolet;
            }100%{//scale改变大小
                transform: scale(1);background: burlywood;
            }
        }
    </style>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                show:true
            }
        })
    </script>
</body>
</html>