关闭

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

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

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

.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

关闭

JavaScript写一个简单的Ps滤镜效果

CSS3多了一个filter的属性,非常强大(兼容性一般)!我们只要根据输入的值/滑块滑动的值来动态更改css中filter属性的值即可,写一个过滤属性滑块和输入框,互相绑定值,如果用vue就简单了

原生js实现放大镜效果

我们平时在电商网站购物时,需要对选取的某一个商品进行详情查看,此时当鼠标在商品图片上某一部分移动查看时旁边就会出现一个该部分图片的放大效果,这样就能够更好的对商品进行分析,下面就使用原生js来实现一下类似放大镜的效果

css 遮照镂空效果

一:最简单最粗暴的方法!截图!二:利用css3的阴影效果。三:利用css的边框属性。四:最麻烦的一个,利用canvas的绘图功能。五:遮罩层加box

Js实现时钟效果

在JavaScript中,有一个内置对象Date,它重要的一个作用就是实现了时间的时刻更新,通过代码来创造一个实实在在的时间表。

CSS实现DIV从隐藏到展示的过渡效果

CSS中有很多功能强大的方法,其中过渡属性transition就很牛叉。你不用写一行JavaScript代码,随便写点css就可以实现一个动画效果。下面结合我在W3C网站上看到的实例,举个栗子说明下

css滚动视差之水波纹效果

核心属性: background-attachment;这个属性就牛逼了, 它可以定义背景图片是相对视口固定,还是随着视口滚动, 加上这个属性网页瞬间就从屌丝变成高大上。

纯CSS实现两个球相交的粘粘效果

这是一个纯粹利用CSS所做出来的效果,这个效果说穿了就是一个图像处理的原理,做法跟Photoshop里头的几乎一模一样,只是一个用图层和色版来制作,一个则是用CSS(把div当成图层思考就好了)。

better-scroll之吸顶效果巨坑挣扎中

今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持PC),关于其中的API大家可以去官网看下 这里就给大家介绍几种常用的以及需要注意的点是什么

css3 斜切角/斜边的实现方式

设计图含有斜切角的效果时,我们一般想到的方法是切出四个角为背景,然后用border连起来,这样就能显示出该效果了,那么直接使用css呢?下面就整理css做斜边的效果。

js之切换全屏和退出全屏实现

应用场景:比如很多网页游戏全屏之类的,或者是网上看小说等。核心代码:控制全屏,前端代码:document.exitFullscreen(); document.mozCancelFullScreen(); document.webkitCancelFullScreen();

点击更多...

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