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

实现方法：用vue动态绑定class的方法，实现用不同的class渲染箭头，达到点击箭头的旋转效果

模板的内容：

//这里是箭头图片<img :class="{ 'arrowTransform': !flag, 'arrowTransformReturn': flag}" src="arrow.png" alt="" @click="flag = !flag">//或者：加一个点击事件就好了（下面这个是箭头图标）<i :class="{ arrowRight: !flag3, arrowDown: flag3 }"class="el-icon-arrow-right downward"></i>

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);}