码迷,mamicode.com
首页 > 其他好文 > 详细

vue过渡动画

时间:2017-06-14 18:05:43      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:method   highlight   als   min   opacity   过渡动画   javascrip   city   var   

<div id="box">
        <input type="button" value="按钮" @click="toggle">
        <transition name="fade">
        	<div id="div1" v-show="isShow"></div>
        </transition>
    </div>

	<script src=‘vue.min.js‘></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:‘#box‘,
            data:{
                isShow:false
            },
            methods:{
                toggle(){
                    this.isShow = !this.isShow;
                }
            }
        });
    </script>

  

.fade-enter-active, .fade-leave-active {
  transition: opacity 10.5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}

#div1{width: 500px;height: 500px;background: red;}
transition的属性 name就是样式的类名

vue过渡动画

标签:method   highlight   als   min   opacity   过渡动画   javascrip   city   var   

原文地址:http://www.cnblogs.com/fm060/p/7009887.html

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