CSS简单动画---自用展开区域动画（箭头旋转，区域拉伸）

 箭头旋转效果：

代码：

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

箭头旋转效果配合区域展开效果：

展开区域的动画代码和箭头旋转是一样的，只是展开要改变的是区域的height属性，并且区域一定要有初始的height高度，不然动画不会生效