码迷,mamicode.com
首页 > Web开发 > 详细

CSS过渡

时间:2017-10-29 19:35:45      阅读:289      评论:0      收藏:0      [点我收藏+]

标签:v-on   style   cti   leave   active   vue   for   vue.js   show   

<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src="vue.js"></script>
    <style type="text/css">
        .slide-fade-enter-active {
            transition : all .3s ease;
        }
        .slide-fade-leave-active {
            transition : all .8s cubic-bezier(1.0,0.5,0.8,1.0);
        }
        .slide-fade-enter, .slide-fade-leave-to {
            transform : translateX(10px);
            opacity: 0;
        }
    </style>
</head>
<body>
    <div id="example-1">
        <button v-on:click="show = !show">
            Toggle render
        </button>
        <transition name="slide-fade">
            <p v-if="show">Hello</p>
        </transition>
    </div>
    <script>
        new Vue({
            el:‘#example-1‘,
            data:{
                show:true
            }
        })
    </script>
</body>

 

CSS过渡

标签:v-on   style   cti   leave   active   vue   for   vue.js   show   

原文地址:http://www.cnblogs.com/ItIsInteresting/p/7750675.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!