Vue中transition单个节点的过渡与transition-group列表过渡
transition 只能满足单个节点的过渡效果,在多个节点的渲染上显得力不从心为了更好适用于更多的场景,vue 提供 <transition-ground>来多个元素的过渡首先创建了一个简单的应用,通过button 来实现动态的加减,使用了啊你,实际效果可运行一下代码[html] view plain copy<body>
·
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>
- </head>
- <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>
更多推荐
已为社区贡献17条内容
所有评论(0)