Vue系列——09-02Vue过渡以及简单的动画实现

SouthernWind
450 阅读3分钟

​​​​​​本文已参与「新人创作礼」活动，一起开启掘金创作之路。

Vue过渡

Vue动画相比较css中的动画比较复杂一些，需要用到新的类名

下面是官网给出的解释：

过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

  1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
  2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
  3. v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
  4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
  5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
  6. v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

​

 看个例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<button type="button" @click="show=!show">点击我及消失</button>
				<h1 v-if="show">Nanchen消失不见</h1>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data(){
					return{
						show:true,
					}
				},
			})
		</script>
	</body>
</html>

效果如下：

​

 这样显得比较僵硬，这时就需要一个过渡效果来解决生硬问题

把需要进行过渡的标签外套上一个 , 例如：

<transition>
	<h1 v-if="show">Nanchen消失不见</h1>
</transition>

这里写上name以便对过渡效果名相匹配，如果不写name，则需在类名前加v-，这里建议写上name防止多个动画发生冲突 

<transition name="fade">
	<h1 v-show="isShow">Nanchen消失不见</h1>
</transition>

CSS样式：

			.fade-enter,
			.fade-leave-to {
				opacity: 0;
			}

			.fade-enter-active,
			.fade-leave-active {
				transition: opacity 3s;
			}

效果如下:

​

 Vue动画

CSS 动画用法类似 CSS 过渡，但是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<style type="text/css">
		button{
			display: block;
		}
		h1{
			border: 1px solid black;
			display: inline-block;
		}
			@keyframes carroon{
				0%{
					transform: translate(0,0);
				}
				25%{
					transform: translate(0,100px);
				}
				50%{
					transform: translate(100px,100px);
				}
				75%{
					transform: translate(100px,0);
				}
				100%{
					transform: translate(0,0);
				}
			}
			/* 注意：这里是animation而不是transition */
			.carroon-leave-active{
				animation: carroon 1s; 
			}
			.carroon-enter-active{
				animation: carroon 1s; 
			}
		</style>
	</head>
	<body>
		<div id="app">
			<button type="button" @click="btnClick">点击执行动画</button>
			<transition name="carroon">
				<h1 v-show="isShow">一个盒子</h1>
			</transition>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						isShow: true
					}
				},
				methods: {
					btnClick() {
						this.isShow = !this.isShow
					}
				}
			})
		</script>
	</body>
</html>

效果如下：

​

同时使用过渡和动画

Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend ，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。

但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。

初始渲染的过渡

可以通过 appear 特性设置节点在初始渲染的过渡

<transition appear>
  <!-- ... -->
</transition>


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    <style>
        .fade-enter,.fade-leave-to {
            opacity: 0;
        }
        .fade-enter-active,.fade-leave-active {
            transition: opacity 1s;
        }
    </style>
</head>
<body>
    <div id="databinding">
        <transition :duration="{ enter: 5000, leave: 10000 }" name="fade" type="transition" appear
            enter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active"
            appear-active-class="animated swing">
            <p v-if="show">动画</p>
        </transition>
        <button v-on:click="show = !show">点我</button>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#databinding',
            data: {
                show: true
            }
        })
    </script>
</body>

</html>

效果如下：

​

关于router的过渡动效

把标签用标签包裹起来即可

加一个name的值，加了值后开头必须以test-......

    <transition name="test">
      <router-view></router-view>
    </transition>

再在下面设置style样式即可

.test-enter,
.test-leave-to {
  opacity: 0;
}
.test-enter-to,
.test-leave {
  opacity: 1;
}
.test-enter-active,
.test-leave-active {
  transition: all 1s;
}

即可实现页面之间的过渡效果

​

avatar
文章
阅读
粉丝