Vue 中多个元素、组件的过渡,及列表过渡

时间: 2019-02-05阅读: 1515标签: 效果

多元素之间如何实现过渡动画效果呢?看下面代码

.fade-enter,
.fade-leave-to{
    opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
    transition: opacity 3s;
}

<div id="root">
    <transition name="fade">
        <div v-if="show">hello world</div>
        <div v-else>bye world</div>
    </transition>
    <button @click="handleClick">切换</button>
</div>

let vm = new vue({
    el: '#root',
    data: {
        show: true
    },
    methods: {
        handleClick() {
            this.show = !this.show
        }
    }
})

这么写行不行呢?肯定是不行的,因为 vue 在两个元素进行切换的时候,会尽量复用dom,就是因为这个原因,导致现在动画效果不会出现。

如果不让 Vue 复用dom的话,应该怎么做呢?只需要给这两个div不同的key值就行了

<div v-if="show" key="hello">hello world</div>
<div v-else key="bye">bye world</div>

这个时候当div元素进行切换的时候,就不会复用了。


mode

Vue 提供了一mode属性,来实现多个元素切换时的效果

mode取值in-out,动画效果是先出现在隐藏

<div id="root">
    <transition name="fade" mode="in-out">   //第一次点击时,执行顺序为:①②
        <div v-if="show">hello world</div>  //再消失  ②
        <div v-else>bye world</div>        //先显示 ①
    </transition>
    <button @click="handleClick">切换</button>    
</div>

mode取值为out-in,动画效果为先隐藏在出现

<div id="root">
    <transition name="fade" mode="out-in">   //第一次点击时,执行顺序为:①②
        <div v-if="show">hello world</div>  //先消失  ①
        <div v-else>bye world</div>        //再显示  ②
    </transition>
    <button @click="handleClick">切换</button>    
</div>


多个组件之间过渡动画效果

这里需要借助动态组件来实现多组件之间过渡动画效果

先用普通的方式来实现切换:

.fade-enter,
.fade-leave-to{
    opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
    transition: opacity 1s;
}

<div id="root">
    <transition name="fade" mode="in-out">
        <child-one v-if="show"></child-one>
        <child-two v-else></child-two>
    </transition>
    <button @click="handleClick">切换</button>
</div>

Vue.component('child-one',{
    template:'<div>child-one</div>'
})
Vue.component('child-two',{
    template:'<div>child-two</div>'
})
let vm = new Vue({
    el: '#root',
    data: {
        show: true
    },
    methods: {
        handleClick() {
            this.show = !this.show
        }
    }
})

你会发现,这样子实现组件切换,transition动画效果是存在的,但是我们想要用动态组件来实现,该怎么弄呢?

可查看之前的文章:Vue 动态组件与 v-once 指令,这篇文章中详细的介绍了 Vue 的动态组件


列表过渡

这里需要使用一个新标签transition-group来是实现

.fade-enter,
.fade-leave-to{
    opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
    transition: opacity 1s;
}

<div id="root">
    <transition-group name="fade">
        <div v-for="item of list" :key="item.id">{{item.title}}-----{{item.id}}</div>
    </transition-group>
    <button @click="handleClick">添加</button>
</div>

let vm = new Vue({
    el: '#root',
    data: {
        count:0,
        list:[]
    },
    methods: {
        handleClick() {
            this.list.push({
                id:this.count ++,
                title:'hello world'
            })
        }
    }
})

为什么使用了transition-group标签后,就可以出现过渡动画效果了呢?看下面代码

<transition-group name="fade">
    <div>hello world</div>
    <div>hello world</div>
    <div>hello world</div>
</transition-group>

在循环过后,页面中会出现一个个div元素,如果你在外面添加一个transition-group的标签,相当于你在每一个div外层都加了一个transition标签,看下面代码

<transition>
    <div>hello world</div>
</transition>
<transition>
    <div>hello world</div>
</transition>
<transition>
    <div>hello world</div>
</transition>

这时候,Vue 把列表的过渡转化为单个的div元素的过渡了,Vue 会在这个元素隐藏或者显示的时候动态的找到时间点,增加对应的class。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1986

关闭

父元素设置overflow:scroll时vuedraggable组件出现奇怪效果的解决方案

最近使用 vuedraggable 做拖拽效果。不过因为要用到滚动条而使用了 overflow: scroll,导致了两个奇怪的效果,虽然折腾了一段时间,不过最后我还是将这些奇怪的 bug 解决了。

jQuery 效果方法summary

定义和用法slideDown() 方法通过使用滑动效果,显示隐藏的被选元素。(被选元素的高度发生变化),该效果适用于通过 jQuery 隐藏的元素,或在 CSS 中声明 display:none 的元素

简单几步用纯CSS3实现3D翻转效果

作为前端开发人员的必修课,CSS3翻转能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform属性 :

使用 JavaScript 实现分屏视觉效果

今天这篇文章就来讲讲使用JavaScript来实现这种分屏的视觉UI效果。现在在网站上这种分屏视觉效果应用的也非常广泛,比如 Corsair website。

css按钮交互效果

是利用了:active和box-shadow两个特性来实现的。希望通过这个简单效果,能让更多的朋友喜欢上css。首先来说一下:active,就是当用户按住一个a标签的时候的意思,鼠标点击下去但没有松开的时候就这样样子啦。

css左边竖条的实现方法

问题描述:在只使用一个标签的情况下实现左边竖线。使用border;使用伪元素来实现;内/外阴影;drop-shadow;渐变 linearGradient

css实现开关效果

我们使用<input type=\\\\\\\"checkbox\\\\\\\">标签来实现这个效果。checkbox的选中、未选中的特性,刚好对应开关的打开、关闭;on:打开 off:关闭;开始画出off、on状态的草图

position: sticky实现导航栏下滑吸顶效果

近期开发中遇到导航栏下滑吸顶的需求,经过方案调研,发现position:sticky可以简单快捷的实现功能。sticky(粘贴定位)可以被认为是相对定位和固定定位的混合,元素在跨越特定阀值前为相对定位

text-fill-color:仿苹果官网介绍效果 CSS设置文字渐变效果 文字背景图遮罩

发布iPhone XR的时候 各种心动 去官网看了一遍又一遍。闲着无聊发现 里面的介绍很用大篇幅的有背景文字来介绍。Like this:看着挺酷炫的还不错 就看了下实现方式。还挺简单的。

js实现文字上下滚动效果

做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效。 要点提示: 1、特效初始化代码

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!