Vue过渡效果

在代码的海洋中寻找亚特兰蒂斯

已于 2024-12-22 18:49:40 修改

阅读量1k

点赞数 35

分类专栏： vue 文章标签： vue.js

于 2024-12-01 22:04:36 首次发布

本文链接：https://blog.youkuaiyun.com/2301_80278139/article/details/144022758

版权

首先过渡的效果是封装的，其是使用过渡的封装组件transition，从而实现的也是用过实现这个对象的动态过渡的效果。

1、CSS过渡

这里对于里面的过渡的效果介绍一下：

all: 指定所有可变的属性都将应用过渡效果。也可以指定具体的属性，比如 color、background-color 或 width 等。
.7s: 这是指过渡效果持续的时间，这里是0.7秒。可以使用其他时间值，例如 1s 表示1秒。
ease: 这是过渡效果的时间函数，它决定了过渡的速度曲线。ease 表示过渡将以慢速开始，然后加速，最后减速结束。其他可用的时间函数包括 linear（匀速）、ease-in（开始时较慢）、ease-out（结束时较慢）以及 ease-in-out（开始和结束时都较慢）。

/* 设置过渡属性 */
.fade-enter-active, .fade-leave-active{
    transition: all .7s ease;
}
.fade-enter, .fade-leave-to{
	transform: translateY(-20px);/*沿Y轴向上平移20px*/
    opacity: 0
}
</style>

<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example" align="center">
	<div class="title" v-on:click="show = !show">公司简介</div>
	<transition name="fade">
		<div align="left" class="content" v-if="show">
			吉林省晨*科技有限公司是一家以计算机软件技术为核心的高科技型企业。
			公司创建于1999年12月，是专业的应用软件开发商和服务提供商。
			多年来始终致力于行业管理软件开发、数字化出版物开发制作、行业电子商务网站开发等，
			先后成功开发了涉及生产、管理、物流、营销、服务等领域的多种企业管理应用软件和应用平台，
			目前已成为计算机出版行业的知名品牌。
		</div>
	</transition>
</div>
<script type="text/javascript">
//创建根实例
var vm = new Vue({
	el:'#example',
	data: {
        show : false	//默认不显示
    }
})
</script>

这里开始的过度开始的transition里面其实还可以写 opacity 2s表示的是过渡效果两秒完成。

2、CSS动画

这里想做的是一个文字变大变小的效果，这里的reverse的意思是如果先前的动画效果是scaling的从上到下的，则他之后就是会变为从下到上的缩放效果。：

！！！！animation 属性用于定义一个动画的关键帧、持续时间、延时、迭代次数等

.scaling-enter-active{
animation: scaling 1s
}
.scaling-leave-active{
animation: scaling 1s reverse
}
/* 设置元素的缩放转换 */
@keyframes scaling {
   0% {
   transform: scale(0); //为原来的图像的大小的0
   }
   50% {
   transform: scale(1.2);   //为原来的图像的大小的1.2
   }
   100% {
   transform: scale(1);   //为原来的图像的大小的1
   }
}

<style type="text/css">
p{
	font: 30px "微软雅黑";/*设置字体和字体大小*/
	margin:30px auto; /*设置元素外边距*/
	font-weight: 500; /*设置字体粗细*/
	color: #f35626;/*设置文字颜色*/
}
/* 设置animation属性的参数 */
.scaling-enter-active{
    animation: scaling 1s
}
.scaling-leave-active{
    animation: scaling 1s reverse
}
/* 设置元素的缩放转换 */
@keyframes scaling {
  	0% {
    	transform: scale(0);
  	}
  	50% {
    	transform: scale(1.2);
  	}
  	100% {
    	transform: scale(1);
  	}
}
</style>

<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example" align="center">
	<button v-on:click="show = !show">切换显示</button>
	<transition name="scaling">
		<p v-if="show">机会总是留给有准备的人</p>
	</transition>
</div>
<script type="text/javascript">
//创建根实例
var vm = new Vue({
	el : '#example',
	data : {
		show : true
	}
});
</script>