vue与css3实现点击箭头的旋转动画（收起展开）效果

html模块：
<img :class="{ 'arrowTransform': !flag, 'arrowTransformReturn': flag}" src="arrow.png" alt="" @click="flag = !flag">

data:
data(){
return {
flag : false,
}
}

style模块：
.arrowTransform{
transition: 0.2s;
transform-origin: center;
transform: rotateZ(180deg);
}
.arrowTransformReturn{
transition: 0.2s;
transform-origin: center;
transform: rotateZ(0deg);
}