css动画效果代码淡入淡出折叠展开点击悬浮

css动画效果代码淡入淡出折叠展开点击悬浮

淡入

.coup-anim {
	width: -webkit-fill-available;
	bottom: 0;
	position: fixed;
	border-radius: 20upx;
	margin-bottom: 0;
	margin: 20upx 100upx;
	background-color: #fff;
	height:900upx;
	/* 淡入 */
	animation: fadeIn 0.4s .1s ease both;
}

@keyframes fadeIn {
 0% {
  opacity: 0;
  transform: translateY(400upx)
 }

 100% {
  opacity: 1;
  transform: translateY(0)
 }
}

淡出

.coup-anim {
		width: -webkit-fill-available;
		bottom: 0;
		position: fixed;
		border-radius: 20upx;
		margin-bottom: 0;
		margin: 20upx 100upx;
		background-color: #fff;
		height:900upx;
		
		animation: fadeIn 0.4s .1s ease both;
	}
	
	@keyframes fadeIn {
	 0% {
	  opacity: 1;
	  transform: translateY(0)
	 }
	
	 100% {
	  opacity: 0;
	  transform: translateY(calc(100% + 20upx))
	 }
	}

按钮点击css

.button {
	margin: 100upx;
	background-color: #e7ad8e;
	color: #900b09;
	opacity: 0.9;
}
.active {
	opacity: 1;
	transform: all .3s;
}

手风琴折叠

<template>
	<view>
		<view class="item" :class="item.class" v-for="item in list" :key="item.content">{{item.content}}</view>
		<button @click="test">测试</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{content:'item1'},
					{content:'item2'},
					{content:'item3'},
					{content:'item4'},
					{content:'item5'},
					{content:'item6'}
				]
			}
		},
		methods: {
			test() {
				this.list = [
					{content:'item1'},
					{content:'item2'},
					{content:'item3'},
					{content:'item4'},
					{content:'item5'},
					{content:'item6'}
				]
				let time = 300
				for(let index in this.list) {
					time = (time + 30)
					setTimeout(() => {
						// $set新增属性响应式更新模板
						this.$set(this.list[this.list.length-index-1],'class','rotate')
						// this.list[index].class = 'rotate'
					},time)
				}
			}
		},
		onLoad() {
			
		}
	}
</script>

<style>
	page{
		background-color: #eee;
	}
	/* 折叠淡出 */
.item {
	padding: 15rpx;
	border-radius: 10rpx;
	margin: 20rpx;
	background-color: #fff;
	/* animation: fadeIn 0.4s .1s ease both; */
}

.rotate {
	animation: fadeIn 0.4s .1s ease both;
}

@keyframes fadeIn {
 0% {
  opacity: 1;
  transform: translateY(0)
 }

 100% {
  opacity: 0;
   transform: translateY(-100%)
 }
}
</style>

手风琴展开

<template>
	<view>
		<view class="item" :class="item.class" v-for="item in list" :key="item.content">{{item.content}}</view>
		<button style="position: fixed;bottom: 0;" @click="test">测试</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{content:'item1'},
					{content:'item2'},
					{content:'item3'},
					{content:'item4'},
					{content:'item5'},
					{content:'item6'}
				]
			}
		},
		methods: {
			test() {
				this.list = [
					{content:'item1'},
					{content:'item2'},
					{content:'item3'},
					{content:'item4'},
					{content:'item5'},
					{content:'item6'}
				]
				let time = 300
				for(let index in this.list) {
					time = (time + 30)
					setTimeout(() => {
						// $set新增属性响应式更新模板
						this.$set(this.list[index],'class','rotate')
						// this.list[index].class = 'rotate'
					},time)
				}
			}
		},
		onLoad() {
			
		}
	}
</script>

<style>
	page{
		background-color: #eee;
	}
	/* 折叠淡出 */
.item {
	padding: 15rpx;
	border-radius: 10rpx;
	margin: 20rpx;
	opacity: 0;
	transform: translateY(-100%);
	background-color: #fff;
	/* animation: fadeIn 0.4s .1s ease both; */
}

.rotate {
	animation: fadeIn 0.4s .1s ease both;
}

@keyframes fadeIn {
 0% {
	  opacity: 0;
	   transform: translateY(-100%)
 }

 100% {
	 opacity: 1;
	 transform: translateY(0)
 }
}
</style>