VUE里动画效果的实现

下载安装animation.css;
在目标元素外使用标签transition,如果只有一个元素,则使用transition,多个元素需要使用transition-group;
在animation官网里面我们可以看到对应的使用方法;

1.transition 只能满足单个节点的过渡效果,在多个节点的处理过程无法使用,vue 提供 transition-ground来多个元素的过渡。
2.transition-group 拥有transition所有属性
transition本身不会渲染出元素,但是transition-group 会渲染出元素节点;
3. 1)在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,不能使用 transition 包裹,需要使用 transitionGroup
2) 如果要为 v-for 循环创建的元素设置动画,必须为每一个 元素 设置 :key 属性
3)通过 为 transition-group 元素,设置 tag 属性,指定 transition-group 渲染为指定的元素,如果不指定 tag 属性,默认,渲染为 span 标签

<li v-for="(item,i) in list" :key=“item.id” @click=“del(i)”>
{{item.name}}


但是当我们把将transition标签改成transition-group标签之后,发现控制台里依然有错误提示—当transition-group里有多个元素时,需要给每个元素设置key值,并且每个key值是不能一样的。设置完后,页面就恢复正常了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值