箭头的上下旋转（展开和收起）

<template>
	<view>
		<img :class="show?'roate':'noRoate'" src="@/static/icons/arrows_x.svg" alt="" @click="showUser">
	</view>
</template>

<script>
	export default {
		name: "my_arrows",
		data() {
			return {
				show: false
			};
		},
		methods: {
			showUser() {
				this.show = !this.show;
			}
		},
	}
</script>

<style lang="scss">
	.roate {

		-webkit-animation: roate .5s;
	}

	.noRoate {
		transform: rotate(-180deg);
		-webkit-animation: noRoate .5s;
	}

	@-webkit-keyframes roate {
		0% {
			transform: rotate(-180deg)
		}

		100% {
			transform: rotate(0deg)
		}

	}

	@-webkit-keyframes noRoate {
		0% {
			transform: rotate(0deg)
		}

		100% {
			transform: rotate(-180deg)
		}

	}
</style>