vue中箭头展开收起效果
<i :class="{ 'arrowRight': !flag, 'arrowDown': flag}" class="el-icon-arrow-right" style="margin-left:5px" @click="flag = !flag"></i>
data() {
return {
flag : false
}
},
<style>
.arrowRight{
cursor: pointer;
transition: 0.2s;
transform-origin: center;
transform: rotateZ(0deg);
}
.arrowDown{
cursor: pointer;
transition: 0.2s;
transform-origin: center;
transform: rotateZ(90deg);
}
</style>