transition的相关知识

最新推荐文章于 2024-06-12 11:13:48 发布

LisnmX

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量611

点赞数 1

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/LisnmX/article/details/127522123

版权

transition的基本用法

transition用法：

< Transition > 是一个内置组件，这意味着它在任意别的组件中都可以被使用，无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。进入或离开可以由以下的条件之一触发：

由 v-if 所触发的切换
由 v-show 所触发的切换
由特殊元素切换的动态组件
列表的进入/离开过渡，现在让我们由一个简单的例子深入，进入和离开的过渡使用之前一样的 CSS 类名。

 v-if控制的transition过渡

<button @click="show = !show">Toggle</button>
<Transition>
  <p v-if="show">hello</p>
</Transition>

<style>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>

不同组件间的切换---使用transition

<transition name="component-fade" mode="out-in">
  <component :is="view"></component>
  </transition>
  
  <script>
  export default {
  data () {
  		return {  
  		 view: 'v-a'
  			}
  },  
  components: {'v-a': { 
  					template: '<div>Component A</div>'},
 			 'v-b': { 
 					 template: '<div>Component B</div>'}
			  }
		}
  </script>

列表过度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  1.导入vue.js库  -->
    <script src="lib/vue.js"></script>
 
    <style>
        /*设置列表的样式*/
        .list-item {
            display: inline-block;
            margin-right: 10px;
        }
        /*设置列表transition-group的name为list的入场以及离场动画效果*/
        .list-enter-active, .list-leave-active {
            transition: all 1s;
        }
        .list-enter, .list-leave-to
            /* .list-leave-active for below version 2.1.8 */ {
            opacity: 0;
            transform: translateY(30px);
        }
    </style>
</head>
<body>
 
    <div id="app">
 
        <!-- 设置一个添加按钮 -->
        <button v-on:click="add">Add</button>
        <!-- 设置一个删除按钮 -->
        <button v-on:click="remove">Remove</button>
 
        <!-- 使用tag指定包括的元素为P标签，命名为list  -->
        <transition-group name="list" tag="p">
            <span v-for="item in items" v-bind:key="item" class="list-item">
              {{ item }}
            </span>
        </transition-group>
 
    </div>
 
    <script>
        // 2\. 创建一个Vue的实例
        var vm = new Vue({
            el: '#app',
            data: {
                items: [1,2,3,4,5,6,7,8,9],
                nextNum: 10
            },
            methods:{
                randomIndex: function () {
                    // 通过获取items列表中的随机下标
                    return Math.floor(Math.random() * this.items.length)
                },
                add: function () {
                    // 在列表items随机位置下标，设置0为不删除数据，添加this.nextNum++的数据
                    this.items.splice(this.randomIndex(), 0, this.nextNum++)
                },
                remove: function () {
                    // 随机删除列表中的其中一个数据
                    this.items.splice(this.randomIndex(), 1)
                },
            }
        })
    </script>
 
</body>
</html>

transition 的属性

name:给相应的过渡元素加上名字
mode:过度模式；
属性值：
in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。
appear:当页面刷新的时候，先调过度一次

<transition name="fade" mode="out-in">
</transition>

transition-group用法

同一时间内渲染单个节点，或者多个节点中的一个，使用< transition >组件，如果同时渲染多个节点，比如整个列表，则需要用< transition-group >组件

transition-group属性

name :给相应的过渡元素加上名字
key :多个元素设置 key , 让vue区分它们，必须要添加的属性
(不可以用索引值来设置为key的属性值)
tag:不同于 < transition >，它会以一个真实元素呈现：默认为一个
< span >。可以通过 tag 属性更换为其他元素。

key值的应用

<transition-group name="list" tag="p" class="list-item">
   <span v-for="item in items" :key="item"> {{ item }} </span>
</transition-group>
<style>
.list-item {  
  display: inline-block;  
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {  
transition: all 1s;
}
.list-enter, .list-leave-to {  
opacity: 0;  
transform: translateY(30px);
}
</style>

tag的应用

<transition-group appear tag=“ul”>
<li v-for=" (item, i) in list" :key="item id" click="del (i) ">
((item.id)) --- ((item. name))
</li>
</tranaition-group>