HTML
<div class="rowDiv" @click="arrowClick">
<span>我是標(biāo)題信息</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;
}
