Vue中transition单个节点过渡与transition-group列表过渡全过程
目录
- transition单个节点过渡与transition-group列表过渡
- transition的过渡作用和transition-group
transition单个节点过渡与transition-group列表过渡
transition：只能满足单个节点的过渡效果，在多个节点的渲染上显得力不从心
为了更好适用于更多的场景，vue 提供 <transition-ground>来多个元素的过渡
首先创建了一个简单的应用，通过button 来实现动态的加减，使用了啊你，实际效果可运行一下代码
<body>
<div id="app">
<button @click="add">add</button>
<button @click="move">remove</button>
<transition-group
name="list"
enter-active-class="animated bounceInDown"
leave-active-class="animated bounceOut"
>
<li v-for="item in num" :key="item">{{item}}</li>
</transition-group>
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{
show:true,
num:10,
statu:false
},
methods:{
add:function(){
this.num++;
},
move:function(){
this.num--;
}
}
});
</script>
transition-group：拥有transition所有属性
但是需要关注的是它们的不同之处：
- transition本身不会渲染出元素
- 但是transition-group 会渲染出元素节点；默认 tag属性为<span>，可修改。
ps:transition-group 的元素必须指定key 属性
在列表元素的动态加入移除中，整个列表会因为元素的改变而相应的改变位子，这些位子属性的改变会很生硬，所以transition-group给出prop move-class;支持通过 CSS transform 过渡移动。当一个子节点被更新，从屏幕上的位置发生变化，它将会获取应用 CSS 移动类
<style>
.div1{
width:156px;
}
.cla1{
border:1px solid #222;
display:inline-block;
width:50px;
height:50px;
text-align: center;
vertical-align: middle;
}
.flip-list-move {
transition: transform 1s;
}
</style>
<body>
<div id="app">
<button @click="chang">reverse</button>
<transition-group tag="div" class="div1" name="flip-list">
<span class="cla1" v-for="item in list" :key="item">{{item}}</span>
</transition-group>
<button @click="add">add</button>
<button @click="move">remove</button>
<transition-group
tag="ul"
name="flip-list"
enter-active-class="animated bounceInDown"
leave-active-class="animated bounceOut"
>
<li v-for="(item,index) in num" :key="item">{{item}}={{index}}</li>
</transition-group>
</div>
</body>
<script>
function shuffle(arr){
var result = [],
random;
while(arr.length>0){
random = Math.floor(Math.random() * arr.length);
result.push(arr[random])
arr.splice(random, 1)
}
return result;
}
var app=new Vue({
el:"#app",
data:{
show:true,
n:3,
num:[1,2,3],
list:[1,2,3,4,5,6,7,8,9],
statu:false
},
methods:{
chang:function(){
this.list=shuffle(app.list);
},
add:function(){
this.num.splice(3,0,++this.n)
},
move:function(){
this.num.splice(3,1)
console.log(this.num)
}
}
});
</script>
transition的过渡作用和transition-group
<transition>标签有两个属性，name 属性和 mode 属性。
transition：里的 name 值fade 就是 .fade-enter-active,类名开头的 fade，
<transition name="fade" mode="out-in">
<router-view/>
<router-view class="left" name="nav" />
<router-view class="right" name="con" />
</transition>
.fade-enter-active, .fade-leave-active {
transition:opacity .4s;
}
.fade-enter, .fade-leave-to {
opacity:0;
}
注意：transition 里面的<div key="c">111222</div>的内容是不显示，如果要显示内容需要把 transition 标签换成 transition-group 标签，
transition-group：标里的所有子元素都要有key值，不然过渡效果是显示不出来的，而且每个子元素标签的key值是不一样的，不能重复。
<transition-group name="aaa" mode="in-out"> <router-view key="d"/> <router-view class="left" name="nav" key="a" /> <router-view class="right" name="con" key="b" /> <div key="c">111222</div> </transition-group>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
vue 组件中使用 transition 和 transition-group实现过渡动画
前言 记一次vue 组件中使用 transition 和 transition-group 设置过渡动画,总结来说可分为分为 name 版, js 钩子操作类名版, js 钩子操作行内样式版... template模板结构 // 单个元素 <transition name="自定义名字"> <p v-if="show">hello</p> </transition> // 列表元素: 注意group的直接子元素是v-f
-
详解vue过度效果与动画transition使用示例
目录 transition钩子函数 自定义过渡类名 transition-group使用 小结 先看一个示例 代码如下 <template> <div align="center" style="margin-top: 100px;"> <button @click="show= !show" >测试</button> <transition> <div v-if="sh
-
Vue中多个元素、组件的过渡及列表过渡的方法示例
多个元素之间过渡动画效果 多元素之间如何实现过渡动画效果呢?看下面代码 .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">hell
-
Vue中transition单个节点过渡与transition-group列表过渡全过程
目录 transition单个节点过渡与transition-group列表过渡 transition的过渡作用和transition-group transition单个节点过渡与transition-group列表过渡 transition:只能满足单个节点的过渡效果,在多个节点的渲染上显得力不从心 为了更好适用于更多的场景,vue 提供 <transition-ground>来多个元素的过渡 首先创建了一个简单的应用,通过button 来实现动态的加减,使用了啊你,实际效果可运行一下代
-
vue中的dom节点和window对象
目录 window对象 dom元素 获取dom节点的3种方式 方式一:(事件源) 方式二:(使用ref) 方式三:(自定义全局指令) window对象 首先window对象是浏览器下的默认对象,也就是全局对象,在没有明确指向的时候this指向window.即使切换路由,window对象里面的属性和方法依旧会保留.因此可以在控制栏直接输入this.window.self都可以直接打印window对象.window对象很很多默认的方法和属性. 一切全局变量和方法都是window的属性和方法,也就是只
-
VUE中使用TypeScript装饰器实现表单验证的全过程
目录 前言 装饰器 class-validator 封装Validator 具体使用 小结 前言 最近接触了关于很多TypeScript装饰器的知识,以及class-validator这个用装饰器来做表单验证的包,就萌生了想在vue中使用装饰器来做表单验证的想法.class-validator允许我们在类上通过使用装饰器来完成表单的验证,并且可在浏览器端和node端同时使用.那么接下来先简单介绍一下装饰器和class-validator的用法. 装饰器 装饰器的语法十分简单,只需要在想使用的装饰
-
vue中el-tree增加节点后如何重新刷新
目录 给el-tree增加节点后重新刷新 el-tree全树刷新,节点刷新 单节点刷新 全树刷新 给el-tree增加节点后重新刷新 1.树形组件 <el-tree v-if="openPanel" //重加载 :data="data" //树形数据 :props="defaultProps" node-key="id" //默认展开节点 :default-expanded-keys="[-1]" /
-
Vue中实现过渡动画效果示例代码
目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画的使用 同时设置两种动画(了解) 过渡的模式mode 列表过渡 列表过渡的介绍 列表过渡的使用 Vue的transition动画 Transition动画的使用 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验: React框架本身并没有提供任何动画相关的API,所以在R
-
Vue中实现过渡动画效果实例详解
目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画的使用 过渡的模式mode 列表过渡 列表过渡的介绍 列表过渡的使用 总结 Vue的transition动画 Transition动画的使用 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验: React框架本身并没有提供任何动画相关的API,所以在React中使用过渡动
-
详解Vue学习笔记进阶篇之列表过渡及其他
本文将介绍Vue中的列表过渡,动态过渡, 以及可复用过渡是实现. 列表过渡 目前为止,关于过渡我们已经讲到: 单个节点 同一时间渲染多个节点中的一个 那么怎么同时渲染整个列表,比如使用 v-for ?在这种场景中,使用 <transition-group>组件.在我们深入例子之前,先了解关于这个组件的几个特点: 不同于 <transition>, 它会以一个真实元素呈现:默认为一个<span>.你也可以通过 tag 特性更换为其他元素. 内部元素 总是需要 提供唯一的
-
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
本篇文章主要介绍了 Vue中使用create-keyframe-animation与动画钩子完成复杂动画,分享给大家 如何实现这个动画? 效果分析 点`start`的时候,我们把整个动画拆分为两种效果(过渡和动画). 1. 中间cd消失,下方播放条显示,这是属于`过渡` 2. `过渡`开始的同时,cd同时移动.放大.缩小到左下方播放条 ,这属于`动画` 上面的效果是[过渡]加[动画]同时使用完成的 对于第一种[过渡],我们用vue中transition标签,加设置v-enter.v-leave
-
vue中transition组件在项目中运用小结
vue中的transtion是一个动画过渡封装组件,常见的情景时用transition标签包裹的DOM含有动画效果.transition组件的动画效果过渡设置基于css的transition属性设置.下面给大家介绍下vue中transition组件在项目中运用. 单个弹入弹出运用 注意: name的名字为多少,则下面的样式class开头就要为多少 通过v-if来配合执行动画效果 <template> <div> <button v-on:click="show =
-
Vue中的transition封装组件的实现方法
vue版本信息:2.5.2 问题起源于使用Vue做网站时涉及到的一个小部件显示动画,阅读了Vue的文档后结合网上各位的经验,花了点时间研究了下. 最终的效果如上图所示,当鼠标移入灰色方块时弹出层会至上而下显示出来,类似于 拉链式窗帘(?). 实例 实现上图所示的效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta