Vue实现显示隐藏小功能-learn

原创
2017/05/29 17:50
阅读数 211

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

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部