第5章过渡

来源：互联网发布：沈阳数据库培训机构编辑：程序博客网时间：2024/05/18 11:10

参考
5.1 CSS过滤

5.1.1 CSS过滤的用法

5.3.2 类名变化
把过渡样式放到-enter-active,-leave-active
把过渡前的放到-enter,-leave
而元素原本的样式则由自己的类名去控制，不和过渡系统自动添加的类名样式混合起来。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .content {            width: 100px;            height: 100px;            background: black;            opacity: 1;        }        .fade-enter,.fade-leave-active {            opacity:0;        }        .fade-enter-active,.fade-leave-active {            transition: all 3s ease;        }    </style></head><body>    <div id="app">        <transition name="fade">            <div class="content" v-if="ok"></div>        </transition>    </div><!--<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>--><script src="https://unpkg.com/vue"></script><script>    var vm = new Vue({        el : '#app',        data : {            ok : false        }    })</script></body></html>

阅读全文

0 0

第5章 过渡

第5章过渡