Vue-9【JS钩子、多元素组件、列表过渡、动画封装】

最新推荐文章于 2024-05-11 09:42:16 发布
最新推荐文章于 2024-05-11 09:42:16 发布
阅读量112 收藏
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yesterday_Tomorrow/article/details/110734053
版权

一.js钩子

(1).基础

js钩子可以用js来实现动画过渡

在transition上加入@before-enter/@enter/@after-enter =“xx”即可实现Js钩子

<div id="root">
        <transition @before-enter="beforeEnter"
                    @enter="enter"
                    @after-enter="afterEnter">
            <div v-if="show">helloWord</div>
        </transition>
        <button @click="handleBtnClick">click</button>
    </div>
    <script>
        let vm = new Vue({
            el:"#root",
            data:{
                show:true
            },
            methods:{
                handleBtnClick(){
                    this.show = !this.show
                },
                beforeEnter(el){
                    el.style.color='red'
                },
                enter(el,done){
                    setTimeout(()=>{
                        el.style.color="green"
                        done();
                    },2000)
                   
                },
                afterEnter(el){
                    setTimeout(()=>{
                        el.style.color="black"
                    },2000)
                }
            }
            
        })

退出改为leave即可，只有enter/leave才会接收两个参数,done用来结束enter/enter

(2).使用库Velocity.js

在响应方法中使用Velocity(el,{opacity:1},{duration:1000,complete:done})实现

 <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
</head>
<body>
    <div id="root">
        <transition @before-enter="beforeEnter"
                    @enter="enter"
                    @after-enter="afterEnter"
                    @before-leave="beforeLeave"
                    @leave="leave"
                    @after-leave="afterLeave">
            <div v-if="show">helloWord</div>
        </transition>
        <button @click="handleBtnClick">click</button>
    </div>
    <script>
        let vm = new Vue({
            el:"#root",
            data:{
                show:true
            },
            methods:{
                handleBtnClick(){
                    this.show = !this.show
                },
                beforeEnter(el){
                    el.style.opacity=0;
                },
                enter(el,done){
                   Velocity(el,{
                       opacity:1
                   },{
                       duration:1000,
                       compelete:done
                   })
                   
                },
                afterEnter(el){
                   
                },
                beforeLeave(el){
                  
                },
                leave(el,done){
                    Velocity(el,{
                       opacity:0
                   },{
                       duration:1000,
                       compelete:done
                   })
                },
                afterLeave(el){
                    
                }
            }
            
        })

    </script>

二.多元素组件

(1).在transition标签中通过if else实现基本切换动画

<style>
        .v-enter,
        .v-leave-to{
            opacity: 0;
        }
        .v-enter-active,
        .v-leave-active{
            transition: opacity 3s linear;
        }
    </style>
</head>
<body>
    <div id="root">
        <transition>
            <div v-if="show">helloWord</div>
            <p v-else>Bye</p>
        </transition>
        <button @click="handleBtnClick">click</button>
    </div>
    <script>
        let vm = new Vue({
            el:"#root",
            data:{
                show:true
            },
            methods:{
                handleBtnClick(){
                    this.show = !this.show
                }
            }
            
        })

    </script>

(2).key=""解决相同元素动画失效

p换为div后就会失效

<transition>
            <div v-if="show">helloWord</div>
            <div v-else>Bye</div>
        </transition>

用key来解决

 

<transition>
            <div v-if="show" key="hello">helloWord</div>
            <div v-else key="bye">Bye</div>
        </transition>

(3).按钮On Off切换

<style>
        .wrapper{
            position: relative;
            width: 31px;
            height: 22px;
        }
        button{
            position: absolute;
            top: 0;
            left: 0;
        }
        .v-enter,
        .v-leave-to{
            opacity: 0;
        }
        .v-enter-active,
        .v-leave-active{
            transition: opacity 1s linear;
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="wrapper">
            <transition>
                <button v-if="show" key="on" @click="onClick">on</button>
                <button v-else key="off" @click="onClick">off</button>
            </transition>
        </div>
        
    </div>
    <script>
        let vm = new Vue({
            el:"#root",
            data:{
                show:true
            },
            methods:{
                onClick(){
                    this.show = !this.show
                }
            }
            
        })

    </script>

(4).按钮On Off切换升级版本

<style>
        .wrapper{
            position: relative;
            width: 31px;
            height: 22px;
        }
        button{
            position: absolute;
            top: 0;
            left: 0;
        }
        .v-enter{
            transform: translateX(31px);
        }
        .v-leave-to{
            transform: translateX(-31px);
        }
        .v-enter-active,
        .v-leave-active{
            transition: all 1s linear;
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="wrapper" mode="out-in">
            <transition>
                <button v-if="show" key="on" @click="onClick">on</button>
                <button v-else key="off" @click="onClick">off</button>
            </transition>
        </div>
        
    </div>
    <script>
        let vm = new Vue({
            el:"#root",
            data:{
                show:true
            },
            methods:{
                onClick(){
                    this.show = !this.show
                }
            }
            
        })

    </script>

其中如果在transition标签上加入 mode=“out-in/in-out”属性即先将out执行完再执行In,如果不加同时触发

(5).两个组件的过渡

通过component :is标签嵌套再transition标签中完成

 <style>
       
        .v-enter,
        .v-leave-to{
            opacity: 0;
        }
        
        .v-enter-active,
        .v-leave-active{
            transition: opacity 1s linear;
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="wrapper">
            <transition  mode="out-in">
                <component :is="type"></component>
            </transition>
            <button @click="onClick">click</button>
        </div>
        
    </div>
    <script>
        Vue.component('child-one',{
            template:'<div>One</div>'
        })
        Vue.component('child-two',{
            template:'<div>Two</div>'
        })
        let vm = new Vue({
            el:"#root",
            data:{
                type:'child-one'
            },
            methods:{
                onClick(){
                    this.type = (this.type === 'child-one' ? 'child-two': 'child-one');
                }
            }
            
        })
     
    </script>

三.列表过渡

在一个transition中同时存在多个相同标签，既要用<transition-group>标签

(1).要求在列表添加的过程中加过渡

<style>
       
        .v-enter,
        .v-leave-to{
            opacity: 0;
        }
        
        .v-enter-active,
        .v-leave-active{
            transition: opacity 1s linear;
        }
    </style>
</head>
<body>
    <div id="root">
        <div class="wrapper">
            <ul>
                <transition-group  mode="out-in">
                    <li v-for="item of list" :key="item.id">{{item.text}}</li>
                </transition-group>
            </ul>
            <button @click="onClick">click</button>
        </div>
        
    </div>
    <script>
        let count = 0;
        let vm = new Vue({
            el:"#root",
            data:{
                list:[]
            },
            methods:{
                onClick(){
                   this.list.push({
                       text:'123',
                       id:count++
                   })
                }
            }
            
        })
     
    </script>

做的事情其实就是给每个li上面添加了一个transition

四.动画封装

(1).封装

通过组件的模板将标签放入，且结合钩子函数和插槽实现封装

 <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
</head>
<body>
    <div id="root">
      
           <fade :show="show">
               <div>HElloWorld</div>
           </fade>
            <button @click="onClick">click</button>
      
        
    </div>
    <script>
        Vue.component('fade',{
            props:['show'],
            template:`
            <transition name="fade"
                        @beforeEnter="beforeEnter"
                        @enter="enter"
                        @afterEnter="afterEnter"
                        @beforeLeave="beforeLeave"
                        @leave="leave"
                        @afterLeave="afterLeave">
                <slot v-if="show"></slot>
            </transition>
            `,
            methods:{
                beforeEnter(el){
                    el.style.opacity=0;
                },
                enter(el,done){
                    Velocity(el,{
                        opacity:1
                    },{
                        duration:1000,
                        templete:done
                    })
                },
                afterEnter(el){

                },
                beforeLeave(el){
                    
                },
                leave(el,done){
                    Velocity(el,{
                        opacity:0
                    },{
                        duration:1000,
                        templete:done
                    })
                },
                afterLeave(el){

                }

            }
        })
        let vm = new Vue({
            el:"#root",
            data:{
                show:true
            },
            methods:{
                onClick(){
                   this.show = !this.show
                }
            }
            
        })
     
    </script>

可乐雪碧薄荷糖
关注
专栏目录
VUE之多元素组件过渡+动画封装
zuomengjia的博客
11-04 497
（1）多元素过渡 （2）多组件过渡 （3）列表过渡 （4）动画封装 多元素过渡 首先介绍下如何实现多元素过渡 （1）利用条件编译指令v-if与v-else实现多元素内容切换. （2）接下来在内容切换基础上，添加过渡动画，例如渐隐渐现效果 1、transition添加name属性命名 2、设置过渡状态 （3）状态管理 测试后发现并没有过渡效果，分析原因Vue在多个元素切换过程中会尽量复用D...
js中的一些基本封装及应用
Locker的博客
11-29 140
正在学，所以就慢慢来补充吧，以循序渐进的方式来讲解 先从最简单的开始 选择器封装 开始我们学的都是下面这种 document.getElementById("***") 对吧，每次调用都是 document.getElementById("啥啥啥") 一开始还好吧，毕竟会的就那么一点，写的也都是一些小demo，自然就只需要写一两个document.getElementById(“啥啥啥”)了，那到还不麻烦 但是，当开发遇到稍微大点的项目，频繁写这些代码无疑就是在浪费时间（摸鱼），那就得...
Vue之多元素组件过渡+动画封装
peijiajing的博客
11-04 893
课程大纲 （1）多元素过渡 （2）多组件过渡 （3）列表过渡 （4）动画封装 多元素过渡 首先介绍下如何实现多元素过渡 （1）利用条件编译指令v-if与v-else实现多元素内容切换. （2）接下来在内容切换基础上，添加过渡动画，例如渐隐渐现效果 1、transition添加name属性命名 2、设置过渡状态 （3）状态管理 测试后发现并没有过渡效果，分析原因Vue在多个元素切换过程中...
VUE-过渡动画
damadashen的博客
05-21 2528
VUE-过渡动画（transition）的使用 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具： 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库，如 Velocity.js 在这里，我们只会讲到进入、离开和列表的过渡，你也可以看下一节的管理过渡状态。
基于Vue的Chart.js封装库：vue-chartjs
最新发布
gitblog_00063的博客
05-11 611
基于Vue的Chart.js封装库：vue-chartjs 项目地址:https://gitcode.com/apertureless/vue-chartjs 项目介绍 vue-chartjs 是一个为Vue框架设计的Chart.js包装器。它允许您轻松创建可复用的图表组件，并且支持Chart.js v4。项目提供了一套完善的API和示例，让在Vue应用中构建交互式图表变得简单快捷。 项目技术分析...
Vue-swiper组件封装
cloki的博客
08-21 770
Vue-swiper组件封装
Vue-Loader 打包单文件组件实战
福仔的博客
05-10 1169
webpack 结合 Vue-loader 来打包 Vue 单文件组件知识的理解和应用。主要内容包括什么是单文件组件、vue-loader 是什么，单文件组件结构及代码编写，利用 Vue-Loader 打包单文件组件，为什么要采用 render 函数来渲染，webpack 模块热替换（HMR）
vue2进阶篇：vue-router之两个新的生命周期钩子
刘大猫
07-12 680
vue2进阶篇：vue-router之两个新的生命周期钩子
学习VUE第十四天课程（VUE之多元素组件过渡+动画封装）
weixin_45582846的博客
11-04 229
学习VUE第十三天课程（VUE之多元素组件过渡+动画封装） （1）多元素过渡 （2）多组件过渡 （3）列表过渡 （4）动画封装 多元素过渡 首先介绍下如何实现多元素过渡 （1）利用条件编译指令v-if与v-else实现多元素内容切换. 多元素过渡 （2）接下来在内容切换基础上，添加过渡动画，例如渐隐渐现效果 1、transition添加name属性命名 2、设置过渡状态 多元素过渡 （3）状态...
tts-vue-1.9.0 语音合成
05-23
Vue.js是一个轻量级、高性能的前端JavaScript框架，它以其组件化开发模式、简洁的API和易于上手的特性受到开发者们的广泛欢迎。在"tts-vue-1.9.0"项目中，Vue.js被用来构建用户界面和管理应用程序的状态。 1. **Vue...
若依框架ruoyi-vue-master(vue2版)
09-10
首先，Vue.js 2.x是这个框架的核心，它是目前非常流行的一个轻量级JavaScript库，以其响应式数据绑定和组件化特性受到开发者喜爱。Vue 2引入了虚拟DOM，优化了渲染性能，并提供了更强大的生命周期钩子函数，使得...
学一学在Vue2中实现过渡&动画的初始渲染和多个元素and组件过渡的效果
张浔CSDN
05-10 1197
💪前言回顾初始渲染的过渡1. appear2. 自定义CSS类名多个元素的过渡过渡模式多个组件的过渡总结 本篇文章阅读大概耗时3分钟，感谢你的拜访 前言 昨天肝出的一篇文章竟然在 CSDN每天值得看 上榜了，怎么说呢，心情非常愉悦，自己的付出得到了回报是一件很激励自己的事情，所以，我就接着来续写了哈哈，接下来的内容如果有看不懂的需要先去 教你用Vue2如何做过渡&动画效果+著名动画库 补习一下喔，还是不懂的话，在下方评论或者私信我说出你不解的地方，我看到就会帮助你解惑的。 同时，感谢CSDN大
Vue深入-4【Vue中事件处理函数绑定、v-model】
Yesterday_Tomorrow的博客
12-10 3103
四.Vue中事件处理函数绑定、v-model (1).事件处理函数绑定 1.data中得事件 事件可以写在data中，但是里面的this是指向window的 <body> <div id="app"> <div @click="onClick">xx</div> </div> <script src="vue2引入"></script> <script&gt
Vue深入-2【VUE3使用proxy】
Yesterday_Tomorrow的博客
12-09 1910
(1).Proxy 1.与defineProperty区别 与defineProperty的区别是缺少了key这个参数，也就是说它是对与某一个key的 proxy得兼容性比较差 defineProperty只要遇到对象就会劫持，proxy则是只会代理第一层 2.proxy得基础使用 new Proxy(obj,{ get(){}, set(){} }) person.name ="xx" 这样并不会响应get set let proxyPerson = new Proxy(o
Vue深入-3【Vue中实例方法、指令】
Yesterday_Tomorrow的博客
12-09 1524
(1).vue3的挂载 1.createApp创建 vue3的挂载方法不是通过new Vue挂载的，而是通过createApp创建和mount 挂载的 createSSRapp可以创建服务端 <body> <div id="app"></div> <script src="vue3引入"></script> <script> const Counter = {
【Vue温故】 Vue编译-内置指令
Yesterday_Tomorrow的博客
01-24 1167
一.Vue编译 vue的模板都是基于HTML，是一套模板编译系统 开发者写的template->分析HTML字符串->AST树->表达式/自定义属性/指令 ->虚拟dom树->解析真实DOM->render 其中通过_c_v_s三个函数构建虚拟dom树 二.指令 v-once会影响到子级元素中的数据绑定，若要解决，可以通过es6的${}来解决 v-html 插值不会解析HTML，因为插值是JS表达式，没有对DOM的操作 rawHTML 三.属性 a
Vue深入-10【表单组件、插槽】
Yesterday_Tomorrow的博客
12-11 971
(1).插槽 1.匿名插槽 引入时用双标签 就会把插槽值赋值进去 <template> <div> <h1>父亲</h1> <slot></slot> </div> </template> <template> <div> <h1>儿子</h1> <parent
Vue嵌套路由中的嵌套命名视图个人感悟
Yesterday_Tomorrow的博客
03-17 875
官网解释感觉没有那么通俗易懂，百度到的基本都是赋值黏贴和没有试验总结的。官网例子有墙看不到，所以可以看看我的总结。 1.官网解释 我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套router-view组件。我们以一个设置面板为例：这个图很形象 /settings/emails /settings/profile +-----------------------------------+ ..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值