Vue-过渡效果

发布于 2020-03-01  259 次阅读

1.过渡

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>

  .kerwinfade-enter-active, .kerwinfade-leave-active {
    transition: all 1.5s;
  }
  .kerwinfade-enter, .kerwinfade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
    transform: translateX(100px);
  }


  .bounce-enter-active {
    animation: bounce-in .5s;
  }
  .bounce-leave-active {
    animation: bounce-in .5s reverse;
  }
  @keyframes bounce-in {
    0% {
      opacity: 0;
      transform: translateX(100px);
    }

    100% {
      opacity: 1;
      transform: translateX(0px);
    }
  }

</style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>

    <!-- <h1 class="animated heartBeat infinite ">1111111111111</h1> -->

    <div id="box">
        <button @click="isShow= !isShow">click</button>

        <transition name="kerwinfade">
            <p v-show="isShow">11111111111111111</p>
        </transition>


        <transition name="bounce">
            <p v-show="isShow">2222222222222</p>
        </transition>


        <transition enter-active-class="animated bounceInRight" leave-active-class="animated bounceOutRight">
            <p v-show="isShow">33333333333333333</p>
        </transition>
    </div>

    <script>
      var vm = new Vue({
        el:"#box",
        data:{
          isShow:true
        }
      })


      //obox1.addEventListern("transitionEnd")
      //obox2.addEventListern("animationEnd")
    </script>
</body>
</html>

 

2.初始元素过渡

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
  .kerwin-enter-active, .kerwin-leave-active {
    transition: all .5s
  }
  .kerwin-enter, .kerwin-leave-to /* .fade-leave-active in below version 2.1.8 */ {
    opacity: 0;
    transform: translateX(100px);
  }



   .bounce-enter-active {
    animation: bounce-in .5s;
  }
  .bounce-leave-active {
    animation: bounce-in .5s reverse;
  }
  @keyframes bounce-in {
    
    0%{
      transform: translateX(100px);
      opacity: 0;
    }

    100%{
      transform: translateX(0px);
      opacity: 1;
    }
  }
</style>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>


    <!-- <div class="animated  hinge infinite">1111111111111</div> -->
    <div id="box">
        <button @click="isShow= !isShow">click</button>

        <transition name="bounce" appear>
          <p v-show="isShow">11111111111</p>

        </transition>

    </div>

    <script>
      var vm = new Vue({
        el:"#box",
        data:{
          isShow:true
        }
      })

    </script>
</body>
</html>

 

3.多个元素过渡

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
  
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  
  100% {
    transform: translateX(0px);
    opacity: 1;
  }
}
</style>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>


    <!-- <div class="animated  hinge infinite">1111111111111</div> -->
    <div id="box">
        <button @click="isShow= !isShow">click</button>

        <transition name="bounce" mode="out-in">
          <div v-if="isShow" key="1">111111</div>
          <div v-else key="2">222222</div>
        </transition>
    </div>

    <script>
      var vm = new Vue({
        el:"#box",
        data:{
          isShow:true
        }
      })



      // {
      //   tag:"div",
      //   text:"111111"
      // }


      // {
      //   tag:"p",
      //   text:"222222"
      // }


      /* Vue 为了减少对于dom 的操作

        (1)  key 目的：为了重用

            key值相同， 就重用
            key值不同，就不重用

        (2)  v-if v-else 如果标签相同，就重用,如果标签不同， 就不重用
       */

    </script>
</body>
</html>

 

4.多个组件过渡

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
  
    *{
      margin: 0px;
      padding: 0px;
    }

    html,body{
      width: 100%;
      height: 100%;
      overflow-x: hidden;
    }
   footer ul {
    display: flex;
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 40px;
   }

   footer ul li {
    flex: 1;
    text-align: center;
    list-style: none;
    height: 40px;
    line-height: 40px;
    background: gray;
   }


   .bounce-enter-active {
     animation: bounce-in .5s;
   }
   .bounce-leave-active {
     animation: bounce-in .5s reverse;
   }
   @keyframes bounce-in {
     0% {
       transform: translateX(100px);
       opacity: 0;
     }
     
     100% {
       transform: translateX(0px);
       opacity: 1;
     }
   }
</style>
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
    <div id="box">
       <keep-alive>
        <transition name="bounce" mode="out-in">
         <component :is="who"></component>
        </transition>
       </keep-alive>
       <footer>
         <ul>
           <li><a @click="who='home'">首页</a></li>
           <li><a @click="who='list'" >列表页</a></li>
           <li><a @click="who='shopcar'">购物车页面</a></li>
         </ul>
       </footer>
    </div>
   

    <script type="text/javascript">
      //babel-loader  ES6=>ES5
    

      var home= {
        template:`<div>
          home
          <input type="text"/>
        </div>`
      }

      var list= {
        template:`<div>
          list
        </div>`
      }

      var shopcar= {
        template:`<div>
          shopcar
        </div>`
      }


      var vm = new Vue({
        el:"#box",
        data:{
            // isHomeShow:true,
            // isListShow:false,
            // isShopcarShow:false
            who:"home"
        },
        components:{
          home, 
          list,
          shopcar
        }
      })

    </script>
</body>
</html>

 

5.多个列表过渡

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>

<style>
  .bounce-enter-active {
    animation: bounce-in .5s;
  }
  .bounce-leave-active {
    animation: bounce-in .5s reverse;
  }
  @keyframes bounce-in {
    0% {
      transform: translateX(100px);
      opacity: 0;
    }
    
    100% {
      transform: translateX(0px);
      opacity: 1;
    }
  }
</style>
</head>
<body>
    <div id="box">
       <input type="text" v-model="mytext"/>
       <button @click="handleClick()">add</button> 

       <!-- <ul> -->
        <transition-group tag="ul" name="bounce">
          <li v-for="item,index in datalist" :key="item">
            {{item}}--<button @click="handleDelClick(index)">del</button>
          </li>
        </transition-group>  
       <!-- </ul> -->
    </div>

    <script type="text/javascript">
        var vm = new Vue({
           el:"#box",
           data:{
            mytext:"1111",
            datalist:[]
           },

           methods:{
            handleClick:function(){

              this.datalist.push(this.mytext);
            },

            handleDelClick(index){
              console.log("del-click",index)

              this.datalist.splice(index,1);//删除
            }
           }
        })

        // 新老虚拟dom对比的 时候 会 使用 diff 算法。
        // 
        // 

        // 
        //    li -1111-  1111
        //    li -2222-  2222
        //    li- 3333- 3333
        //    
        //    
        //    li -1111-  1111
        //    li -33333- 3333
    </script>
</body>
</html>

 

6.可复用过渡

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">

<style>
  .bounce-enter-active {
    animation: bounce-in .5s;
  }
  .bounce-leave-active {
    animation: bounce-in .5s reverse;
  }
  @keyframes bounce-in {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    
    100% {
      transform: translateX(0px);
      opacity: 1;
    }
  }
</style>
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
    <div id="box">
        <navbar @myevent="control"></navbar>
       
        <sidebar v-show="isShow"></sidebar>
        
    </div>
   
   

    <script type="text/javascript">
        //子组件
       Vue.component("navbar",{
        template:`<div>

          navbar--<button @click="handleClick">show/hide</button>
        </div>`,

        methods:{
          handleClick(){
            this.$emit("myevent");
          }
        }
       })


       Vue.component("sidebar",{
        template:`
         <transition name="bounce">
        <div style="background:black;color:white;width:300px;">

          sidebar
          <ul>
            <li>1111</li>
            <li>1111</li>
            <li>1111</li>
            <li>1111</li>
            <li>1111</li>
            <li>1111</li>
            <li>1111</li>
          </ul>
        </div>
        </transition>
        `
       })

       
        var vm = new Vue({
          el:"#box",
          data:{
            isShow:false
          },
          methods:{
            control(){
              this.isShow = !this.isShow;
            }
          }
        })
      

    </script>
</body>
</html>

总结：

transition过渡
   Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
      (1)单元素/组件过渡
          * css过渡
          * css动画
          * 结合animate.css动画库
      (2) 多个元素过渡(设置key)
          mode:in-out ; out-in
      (3)多个组件过渡
      (4)列表过渡(设置key)
          *<transition-group>不同于 transition， 它会以一个真实元素呈现：默认为一个 <span>。你也可以通过
tag 特性更换为其他元素。
          * 提供唯一的 key 属性值

 

注错之当