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

丰的传说

于 2022-05-10 20:21:34 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue实战文章标签： vue.js css 动画

本文链接：https://blog.csdn.net/qq_42389674/article/details/124696457

vue实战专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何利用CSS关键帧动画（@keyframes）和JavaScript控制，实现在页面上通过过渡效果显示和隐藏内容。通过改变元素的bottom位置并设置动画，实现元素从屏幕底部滑入和滑出的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>