vue动画实现图片旋转出去然后再进来案例

最新推荐文章于 2024-02-05 21:45:00 发布

温L

最新推荐文章于 2024-02-05 21:45:00 发布

阅读量325

点赞数 1

文章标签：前端 javascript vue.js 动画 css

本文链接：https://blog.csdn.net/lwf0829/article/details/121567708

版权

本文介绍如何使用 Vue.js 结合 CSS 动画实现图片旋转进出的视觉效果。通过创建Vue组件，结合CSS3的transform属性和transition过渡效果，详细阐述了实现这一动态效果的步骤和关键代码。

摘要由CSDN通过智能技术生成

效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* 离开过渡生效时的状态 */
			.fade-leave-active{
				transition: all ease 1s;
			}
			/* 定义离开过渡的开始状态 */
			.fade-leave{
				opacity: 1;
				transform: rotate(0deg);
			}
			/* 定义离开过渡的结束状态 */
			.fade-leave-to{
				opacity: 0;
				transform: rotate(180deg);
			}
		</style>
	</head>
	<body>
		<div id="app">
			<button type="button" @click="flag=!flag">切换</button><br>
			<!-- out-in当前元素先进行过渡，完成之后新元素过渡进入。 -->
			<transition name="fade" mode=out-in>
				<!-- 点击flag为true显示第一张为false隐藏上面click控制true还是false -->
				<img src=&