vue css animation 页面向上弹出动画和向下滑动隐藏动画

<template>
	<div v-if="show"  :class="{ showAni: show, closeAni: closeStatus }" >
        <div class="content"></div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			show: false,
			closeStatus: false
		};
	},

	components: {},

	computed: {},

	created() {},

	mounted() {	},
	destroyed() {},
	methods: {
		handleDestory() {
			this.closeStatus = true;
			setTimeout(_ => {
				this.show = false;
			}, 300);
		},
		addShow(e) {
            this.show=true
			this.closeStatus = false
		}
	}
};
</script>
<style lang="scss" scoped>
.content{
    position: fixed;
    left:0;
    bottom: 0;
    height: 80vh;
}
@keyframes show {
	0% {
		bottom: -100vh;
	}
	100% {
		bottom: 0;
	}
}
.closeAni {
	animation: close 300ms linear 0s;
}
@keyframes close {
	0% {
		bottom: 0;
	}
	100% {
		bottom: -100vh;
	}
}
</style>

使用animation和 keyframes 实现帧动画的过渡效果

核心思路是通过改变 bottom参数并加上过渡实现动画效果