写给自己看的vue-过度组件小结

最新推荐文章于 2022-12-17 22:23:35 发布

好菜的程序媛

最新推荐文章于 2022-12-17 22:23:35 发布

阅读量281

点赞数 1

文章标签： vue transition 过度组件

本文链接：https://blog.csdn.net/Gomeer/article/details/85067005

版权

transition是vue内置组件

<transition name="fade">
	
</transition>

列表过度 transition-group

<transition-group name="list" tag="p" >
      <span v-for="item in items" v-bind:key="item" class="list-item">
                {{ item }}
       </span>
 </transition-group>

常用的属性
name ：过度组件名字
appear：则页面初始渲染时即出现过渡
mode ：动画的衔接
tag: 更换为其他元素

1.transition过渡效果的条件
transition标签内部的元素需要有
1.v-if
2.v-show
3.
4.vue中的跟实例

2.transition 相关的6个类名
过度组件中会有6个css类名进行切换，这六个类名与transition的name有关，比如
name=“fade”,就会有6个css类名：
fade-enter-active，
fade-leave-active，
fade-enter: 定义进入过度的开始状态
fade-leave-to: 定义离开过度的结束状态
fade-enter-to,
fade-leave-to 在这里插入图片描述
由图可看出，v-enter-to、v-leave可以被省略，所以我们使用时常用：
v-enter-active
v-leave-active
v-enter
v-leave-to
3.最基础的一个例子
点击btn按钮让p标签切换显示/隐藏状态

<style>	 	    	 	
    	 /* 如果在transition上不写name属性，v表示默认名字 */
    .v-enter-active,.v-leave-active{
          transition: all .5s;
      }
      .v-enter{	            
          transform: translateX(-100px);
      }
      .v-leave-to{          
          transform: translateX(100px);
      }           	 	       	 	
</style>
<div id="app">
	<button @click="toggle">toggle</button>
	<transition>
		<p v-if="isShow">动画内容2</p>
	</transition>
</div>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
	var vm=new Vue({
		el:"#app",
		data:{
			isShow:true
		},
		methods:{
			toggle(){
				this.isShow=!this.isShow
			}
		}
	})
</script>

4.在animate.css中有许多封装好的特效，可以引用
demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入animate.css多种动画效果-->
		<link rel="stylesheet" href="animate.min.css"/>
		<style>
			.bounce-enter-active {
	            animation: shake 2s;
	        }
	
	        .bounce-leave-active {
	            animation: bounceOut 2s reverse;
	        }
		</style>
	</head>
	<body>
		<div id="app">
			<button @click="show = !show">Toggle show</button>
			<transition name="bounce">
				<p v-if="show">Loremetus</p>
			</transition>			
		</div>
		<script type="text/javascript" src="../js/vue.js" ></script>
		<script>
			new Vue({
	            el: '#app',
	            data: {
	                show: true
	            }
	      })						
		</script>								
	</body>
</html>

5.transition中多个元素
当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue区分它们，
否则 Vue 为了效率只会替换相同标签内部的内容。
mode属性：动画的衔接
in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。
dome:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
	        .fade-enter-active, .fade-leave-active {
	          transition: all 3s;
	        }
	        .fade-enter{
	            transform: translate(-100px,0);
	        }
	        .fade-leave-to{
	            transform: translate(500px,0);
	        }
    	</style>
	</head>
	<body>
		<div id="app">
			<button @click="toggle">toggle</button>
			<transition name="fade" mode="out-in">				
                <p v-if="isShow" key="first" >第一个动画内容</p>
                <p v-else key="second">第二个动画内容</p>
           </transition>			
		</div>				
		<script type="text/javascript" src="../js/vue.js" ></script>
		<script>
			var vm=new Vue({
				el:"#app",
				data:{
					isShow:true
				},
				methods:{
					toggle(){
						this.isShow=!this.isShow
					}
				}
			})
		</script>
	</body>
</html>

6.多个组件过度
多个组件,我们不需要使用 key 特性,相反，我们只需要使用动态组件
如果在transition中添加appear, 则页面初始渲染时即出现过渡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .component-fade-enter-active,.component-fade-leave-active {
            transition: opacity 1s ease;
        }
        .component-fade-enter,.component-fade-leave-to{
            opacity: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="toggle">toggle</button>
        <transition name="component-fade" mode="out-in" appear>
            <component :is="view"></component>
        </transition>
    </div>   
    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                view: 'v-a'
            },
            components: {
                'v-a': {
                    template: '<div>Component A</div>'
                },
                'v-b': {
                    template: '<div>Component B</div>'
                }
            },
            methods: {
                toggle() {
                    if (this.view == 'v-a') {
                        this.view = 'v-b'
                    } else {
                        this.view = 'v-a'
                    }
                }
            }
        })
    </script>
</body>
</html>

7.列表过度transition-group
不同于 transition，transition-group它会以一个真实元素呈现，默认为一个 span。
你也可以通过 tag 特性更换为其他元素，下面的例子将transition-group转变为p标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <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);
        }
        .list-move {
            transition: transform 1s;
        }        
    </style>
</head>
<body>
    <div id="list-demo" class="demo">
        <button v-on:click="add">Add</button>
        <button v-on:click="remove">Remove</button>
        <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 src="../js/vue.js"></script>
    <script>
        new Vue({
            el: '#list-demo',
            data: {
                items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
                nextNum: 10
            },
            methods: {
                randomIndex: function () {
                    return Math.floor(Math.random() * this.items.length)
                },
                add: function () {
                    this.items.splice(this.randomIndex(), 0, this.nextNum++)
                },
                remove: function () {
                    this.items.splice(this.randomIndex(), 1)
                },
            }
        })
    </script>
</body>
</html>

动画更自然，加上以下类名

.list-move {
        transition: transform 1s;
    }

好菜的程序媛

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
写给自己看的vue-过度组件小结

transition是vue内置组件&lt;transition name="fade"&gt; &lt;/transition&gt; 列表过度 transition-group&lt;transition-group name="list" tag="p" &gt; &lt;span v-for="item in items" v-bind:k
复制链接

扫一扫