当前位置 > it书童 > vue > 正文

Vue 中 css 动画原理

vue it书童 2020-01-08 22:33:56 0赞 0踩 155阅读 0评论
<div id="app">
    <div class="container mt-5">
        <div v-if="show">hello world</div>
        <button @click="handleClick" class="btn btn-success">切换</button>
    </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            handleClick: function () {
                this.show = !this.show
            }
        }
    })
</script>

接下来实现动画效果

image-20200108221559716

image-20200108222129824

原理就是 vue 在动画流程添加或删除相应的 css 类名

因此只需要对这些类名添加样式即可

    <style>
        .fade-enter {
            opacity: 0;
        }
        /*监听 fade-enter 的变化,变化时就触发其执行*/
        .fade-enter-active {
            transition: opacity 3s;
        }
        .fade-leave-to {
            opacity: 0;
        }
        .fade-leave-active {
            transition: opacity 3s;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container mt-5">
<!--        动画需要加上 transition -->
<!--        name 值指定了 css 类名前缀,如果不指定,默认前缀为 v- -->
        <transition name="fade">
<!--            也可以用 v-show 也可以写动态组件 -->
            <div v-if="show">hello world</div>
        </transition>
        <button @click="handleClick" class="btn btn-success">切换</button>
    </div>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: true
        },
        methods: {
            handleClick: function () {
                this.show = !this.show
            }
        }
    })
</script>
转载须注明出处:https://www.itshutong.com/articles/385/the-principle-of-css-animation-in-vue
标签: 讲义
关于我
一个文科出身的程序员,追求做个有趣的人,传播有价值的知识,微信公众号主要分享读书思考心得,不会有代码类文章,非程序员的同学请放心订阅
发表评论
我有句话,不知当讲不当讲?
要讲之前请先 登录