• Vue的进入和离开和列表的过渡


    1.单元素/组件的过渡 Css过渡

      使用transition分装组件和要使用动画的元素

      渲染条件:v-if

      渲染展示:v-show

      动态组件

      组件根节点

       

    <!DOCTYPE HTML>  
    <html charset="UTF-8">  
    <head>  
        <meta charset="UTF-8">  
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     <style>
      .fade-enter-active, .fade-leave-active {
        /* 整个进入页面和离开页面的过程 */
        transition: opacity .5s;
        /* 将透明度的过渡时间设置为0.5秒 */
      }
      .fade-enter, .fade-leave-to {
        /* 进入和离开页面的时候元素的样式 透明度为0 某个时刻的样式*/
        opacity: 0;
      }
     </style>
    </head>
    
    <body>
      <div id="app">
          <!-- 通过点击设置show的值,当值是false的时候就将DOM树中的子组件login删除,当删除元素的时候就
            掉用了transition的过渡动画。
          -->
          <button v-on:click="show = !show">
            Toggle
          </button>
          <!-- fade 是和 style中选择器名字相关 -->
          <transition name="fade">
            <login v-if="show"></login>
            <!-- 通过if来将子组件进行显示和切换 -->
          </transition>
          
      </div>
    
      <!-- 登录子组件 -->
      <template id="login">
        <div>
          <h1>登录组件</h1>
        </div>
      </template>
    
      
     <script>
    
       new Vue({
        el:"#app",
        data:{
          show:true,
        },
        components:{
          login:{
            template:"#login"
          }
        }
       })
     
     </script>
        
    </body>
    </html>

      如果组件使用transition进行分装的时候,Vue会自动的在合适的时间添加和删除类名。

      如果该组件中有设定钩子函数,也会在合适的时间被调用。如果啥也没就直接执行。

     

      v-enter  v-enter-to v-eave v-leave-to 都是表示某一个时刻的样式,v-enter-active v-leave-active 表示整个过渡时间段的样式。

      分别表示:刚进入页面的时候,完全进入页面,刚离开页面的时候,完全离开页面的时候。

    2.Css动画

      Css动画和Css过渡之间的区别:  动画中v-enter类名在节点插入DOM后不会立即删除,而是在animationed事件触发的时候被删除。

      

      .bounce-enter-active {
      animation: bounce-in .5s;
    }
    .bounce-leave-active {
      animation: bounce-in .5s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
    }

     

     3.自定义过渡的类名

      一般用于第三方库,例如是在

        enter-class

        enter-active-class

        enter-to-class

        leave-class

        leave-active-class

        leave-to-class

    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    
    <div id="example-3">
      <button @click="show = !show">
        Toggle render
      </button>
      <transition
        name="custom-classes-transition"
        enter-active-class="animated tada"
        leave-active-class="animated bounceOutRight"
      >
        <p v-if="show">hello</p>
      </transition>
    </div>

      自定义的类要比普通的类的优先级高

      同时使用过渡和动画的时候可以使用animationend ,transitionend监听事件来判断动画和过渡是否完成  检测的时候只有动画的时候没有任何效果,该事件并未触发,具体未知。

     

    过渡时间:

    <transition :duration="{ enter: 500, leave: 800 }">...</transition>
    //
    <transition :duration="1000">...</transition>

    4.通过钩子函数实现过渡

      

    <div id="app">
        <button @click="show = !show">Toggle show</button>
        <transition  v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:after-enter="afterEnter"
        v-on:enter-cancelled="enterCancelled"
      
        v-on:before-leave="beforeLeave"
        v-on:leave="leave"
        v-on:after-leave="afterLeave"
        v-on:leave-cancelled="leaveCancelled">
            <login v-if="show"></login>
        </transition>

      </div>



      new Vue({
        el:"#app",
        data:{
          show:true,
        },
        methods:{
          beforeEnter:function(el){
            //进入页面的时候 
            el.style.fontSize = "13px";
            el.style.color = "red";
          },
          enter:function(el){
            //进入页面
            el.style.transition = "all 0.5s";
            // 如果在进入页面这个过程中设置了过程属性
            // 就会覆盖原本的beforeEnter中的时刻属性
             el.style.color = "blue" 
          },
          afterEnter:function(el){
            //进入页面之后
            el.style.fontSize = "20px";
            el.style.color = "green";
          },
          enterCancelled:function(el){
            //取消进入页面?
          },
          beforeLeave:function(el){
            //离开页面的时候的样式
            el.style.color = "pink";
            el.style.fontSize  = "30px";
          },
          leave:function(el){
            //离开页面
            //给过程中的元素设置属性的时候会掩盖时刻的属性
            el.style.color ="gold";
            el.style.transition = "all 1s";
          },
          afterLeave:function(el){
            //离开页面时刻
            el.style.color = "black";
            el.style.fontSize  = "10px";
          },
          leaveCancelled:function(el){
            //取消离开页面  只在v-show的时候使用
          }
        },
        
        components:{
          login:{
            template:"#login",
            }
         
          }
     
       })
     


     当只用 JavaScript 过渡的时候,在 enter 和 leave 中必须使用 done 进行回调。否则,它们将被同步调用,过渡会立即完成。但是在调用了done之后就会直接运行到最后,不会进行过渡,没有调用的时候反而不会直接同步被调用。

    5.多个组件的过渡

      

     <style>
      
      .check-enter-active,.check-leave-active{
        transition: all 1s;
      }
      .check-enter,.check-leave-to{ //进入和离开的时刻的样式
    opacity: 0;
    
      }
    
     </style>
    </head>
    
    <body>
      <div id="app">
        <button @click="show">Toggle show</button>
        <transition name="check" mode="out-in">
          <!-- is用来展示的template组件 mode组件切换的模式 name 过渡的前缀 component占位符 表示展示的组件 -->
        //必须是使用is来进行组件的切换 <component :is="view"></component> </transition> </div> <!-- 登录子组件 --> <template id="login"> <div> <h1>登录组件</h1> </div> </template> <!-- 注册子组件 --> <template id="register" > <div > <h1>注册子组件</h1> </div> </template> <script> new Vue({ el:"#app", data:{ view:"login" }, methods:{ show:function(){ if(this.view=="login"){ this.view = "register"; }else{ this.view = "login" } } }, components:{ login:{ template:"#login", }, register:{ template:"#register", } } })
  • 相关阅读:
    javascript获取url参数的代码
    SharePoint最简母版页
    添加 <identity impersonate="true" userName="username" password="password"/>,解决问题!
    使用SPD自定义MOSS导航
    浮动图标代码
    十五种网站最差的用户体验
    div flash firefox div层总是被flash层遮盖
    压缩数据库扩展名为.ldf的日志文件
    版本的签入签出策略
    用CSS制作的圆角层
  • 原文地址:https://www.cnblogs.com/panjingshuang/p/11965159.html
Copyright © 2020-2023  润新知