vue箭头旋转

HTML

<div class="rowDiv" @click="arrowClick">
      <span>我是标题信息</span>
      <img src="~assets/images/arrow.png" alt="" :class="{icon: true, iconTrans:rotate}">
 </div>

JS

data(){
  return{
    rotate:false
  }
}
methods:{
  arrowClick(){
   this. rotate = !this. rotate
  }
}

CSS

.rowDiv{
    display: flex;
    /*justify-content: center;*/
    align-items: center;
    background: #4cd964;
    margin-top: 20px;
    height: 50px;
    span{
      text-align: left;
      flex: 1;
    }
    img{

    }
  }
  .icon {
    -webkit-transition: transform .25s linear;
    -moz-transition: transform .25s linear;
    -o-transition: transform .25s linear;
    transition: transform .25s linear;
  }
  .iconTrans {
    transform: rotate(180deg);
    -webkit-transition: transform .25s linear;
    -moz-transition: transform .25s linear;
    -o-transition: transform .25s linear;
    transition: transform .25s linear;
  }