vue过渡

<!DOCTYPE html>
<html>
<head lang="en">
   <meta charset="UTF-8">
   <title></title>
   <script src="https://unpkg.com/vue/dist/vue.js"></script>
   <style>
      .btn{
         position: fixed;
         bottom: 100px;
         left: 100px;
         width: 50px;
         height: 50px;
         border-radius: 50%;
         background: blue;
         color: white;
         outline: none;
         border: none;
         z-index: 10;
      }

　　　　.menu{
   　　　　position: fixed;
　　　　   bottom: 100px;
　　　　   left: 100px;
　　　　   width: 50px;
　　　　   height: 50px;
　　　　   border-radius: 50%;
　　　　   transition: all 1s;
　　　　}
　　　　.inner{
　　　　   width: 25px;
　　　　   height: 25px;
　　　　   position: absolute;
　　　　   display: inline-block;
　　　　   color: #fff;
　　　　   border-radius: 50%;
　　　　   background: red;
　　　　}
　　　　.inner-1{
　　　　   transform: translate3d(-60px,0,0);
　　　　}
　　　　.move-leave-active>.inner-1,.move-enter-active>.inner-1{
　　　　   transition: all 1s;
　　　　}
　　　　.move-enter>.inner-1,.move-leave-active>.inner-1{
　　　　   transform: translate3d(2px,0,0);
　　　　}
   </style>

</head>
<body>

   <div id="app">
      <button class="btn" @click="showText">{{text}}</button>
      <transition name="move">
         <div class="menu" v-show='show'>
            <p class="inner inner-1"></p>
         </div>
      </transition>
   </div>

   <script>
      new Vue({
         el: '#app',
         data () {
         return {
               text: '关',
               show: true
            }
         },
         methods: {
            showText () {
               this.show = !this.show
               this.text = this.show ? '关' : '开'
            }
         }
      })
   </script>
</body>
</html>

注意事项:
　　1.transition要写到menu的元素上
　　2.先写过渡前的初始状态
消失过程: 初始状态->move-leave-active(过渡+最终状态)
显示过程: 过渡最终状态->move-enter-active(过渡)->初始状态

posted on 2017-11-16 16:48 jr_goon 阅读(196) 评论(0) 收藏举报