CSS simple animation --- self-use expansion area animation (arrow rotation, area stretching)

 Arrow rotation effect:

code:

<template>
<view>	
<view class="arrow" :style="{transform:isOpen?transform:'', transition:transition}" @tap="openTap">
</view>	
</template>
export default {
		data() {
			return {
                isOpen: false,
				transform: "rotate(180deg)",
				transition: "all .3s"
                    }
                },
        methods: {
			openTap() {
				this.isOpen = !this.isOpen
			}
                 }
         }

<style lang="scss">
	.arrow {
						width: 29rpx;
						height: 17rpx;
						display: inline-block;
						background-image: url('../../static/specimen/down-arrow.png');
                        //方向向下的箭头图片，实际就是实现了点击下箭头后旋转变成上箭头
					}
</style>

The arrow rotation effect matches the area expansion effect:

The animation code of the expanded area is the same as that of the arrow rotation, except that the height property of the area needs to be changed when the area is expanded, and the area must have an initial height, otherwise the animation will not take effect