vue2项目之transition标签搭配动画

transition标签搭配动画

Vue封装了一个标签 <transition> 来实现一个元素的显示与隐藏（v-show） 产生的过渡动画

第三方库这里用到animate.css 、 transition.css（这个直接复制）

https://www.transition.style/#out:circle:center

https://www.dowebok.com/demo/2014/98/

下面两个案例自己复制看看效果！！！

5.9.1 animate.css

npm i animate.css

// 在 mian.js 全局安装
import animated  from 'animate.css'
Vue.use(animated)

<template>
	<div>
		<button @click="show = !show;">点击</button>

		<transition
			enter-active-class="animate__animated animate__swing"
			leave-active-class="animate__animated animate__backOutUp"
		>
			<!-- 导航下拉面板 -->
			<div class="nav" v-show="show"></div>
		</transition>

	</div>
</template>

<script>
	export default {
		name:'Test',
		data() {
			return {
				show: false
			}
		},
	}
</script>

<style scoped>
	.nav {
		width: 100px;
		height: 200px;
		background: red;
	}
</style>

如果在某个元素使用动画，可以设置持续时间和延时

div {
    animation-duration: 2s;
    animation-delay: 0.4s;    
}

要修改其他配置 只能去修改源码？！

5.9.2 transition.css

1、需要手动复制动画 并将 [transition-style="..."] 改为类名

<template>
	<div>
		<button @click="show = !show;">点击</button>

		<transition
			enter-active-class="down"
			leave-active-class="up"
		>
			<!-- 导航下拉面板 -->
			<div class="nav" v-show="show"></div>
		</transition>

	</div>
</template>

<script>
	export default {
		name:'Test',
		data() {
			return {
				show: false
			}
		},
	}
</script>

<style scoped>
	.nav {
		width: 100px;
		height: 200px;
		background: red;
	}

    @keyframes wipe-in-down {
		from {
			clip-path: inset(0 0 100% 0);
		}
		to {
			clip-path: inset(0 0 0 0);
		}
    }

    .down {
        animation: 1s cubic-bezier(.25, 1, .30, 1) wipe-in-down both;
    }

    @keyframes wipe-out-up {
		from {
			clip-path: inset(0 0 0 0);
		}
		to {
			clip-path: inset(0 0 100% 0);
		}
    }

    .up {
        animation: 1s cubic-bezier(.25, 1, .30, 1) wipe-out-up both;
    }


</style>