Vue动画之多个元素或组件的动画效果

        前面我们看的是单个元素的过渡效果,我们看一下多个元素或者组件的过渡

多个元素过渡

<div id="app">
    <transition>
        <p v-if="show" key="hell">Hello 十月梦想!</p>
        <p v-else key="bye">Bye! Bye! 十月梦想!</p>
    </transition>
</div>

        动态控制if的数据控制显示

 var app=new Vue({
        el:"#app",
        data:{
            type:"item",
            show:true
        },
        methods:{
            qiehuan:function(){
                this.show=!this.show
            }
        }

    })
</script>

        多个元素我们需要在元素上指定唯一的key值,否则是vue会进行dom复用没有效果,加上唯一的key则可以解决这个问题!

多组件过渡

        多个组件的过渡和元素一样,定义两个组件,把transition中元素替换组件就行!我们说一下实现动态组件,进行过渡

动态组件在之前我们已经介绍过!

<transition mode="out-in">
    <component :is="type"></component>
</transition>
<button type="button" @click="qh">切换</button>

    在动态组件绑定一个控制的属性(绑定is)

        js新建的组件,以及切换的方法

Vue.component('item',{
    template:`
        <p>item</p>
    `
})
Vue.component('item-one',{
    template:`
        <p>item-one</p>
    `
})
var app=new Vue({
    el:"#app",
    data:{
        type:"item",
        show:true
    },
    methods:{
        qh:function(){
          this.type=this.type=='item'?"item-one":"item";
        }
    }

})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏做全栈攻城狮

.Net程序员快速学习安卓开发-布局和点击事件的写法

我们新建一个layout布局文件时,默认就是相对布局。相对布局是相对于非相对布局来说的。顾名思义,相对布局就是 相对于某些控件位置的布局。所有的控件都是相对位置...

14240
来自专栏快乐八哥

DIV元素水平和垂直居中

在前端开发过程中,经常要对元素进行居中设置。一般有水平居中,和垂直居中。一般设置水平居中简单。基本是margin:0 auto,就可以了。但是垂直居中,我们有时...

47080
来自专栏十月梦想

表单

1.表单控件     1.input标记         1.input标记             提供文本输入框,密码输入框,按钮,单选按钮,多选按钮,...

8430
来自专栏河湾欢儿的专栏

常见选择器

Id选择器(同一页面不能重名)# 类选择器 . 标签选择器 p 包含选择器 .box p 群组选择器 , 通配符 *

9620
来自专栏yl 成长笔记

ps 替换背景以及调整尺寸

领导吩咐我修改她的图片背景,尺寸, 屁颠屁颠去弄,半小时后发现大学里学的 ps 忘差不多了,这里总结一下修改图片背景以及尺寸的基本操作。

13230
来自专栏前端知识分享

第137天:移动端-仿京东秒杀倒计时

41330
来自专栏小巫技术博客

A018-布局之TableLayout

表格布局,顾名思义像表格一样进行布局。我们通常配合TableRow一起使用,TableRow代表一行,有多少个TableRow就有多少行。

9120
来自专栏知道一点点

bootstrap快速入门笔记(八)-按钮,响应式图片

一,默认样式:.btn-default , .btn-primary , .btn-success  ,.btn-info, btn-warning ,btn-...

13030
来自专栏python3

tkinter -- Event(1)

分别测试鼠标的 Relase 事件,只有当鼠标被 Relase 后移动才回产生 Relase 事件

6310
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:手机应用的TextTabBar快速实现方式

设置控件字体的颜色,将该属性设置为“95, 100, 110”,表示RGB颜色,如图2;

9240

扫码关注云+社区

领取腾讯云代金券