请问如何实现点击图标后，图标翻转？

Question

请问如何实现点击那个向下的箭头icon后，图标在一段时间后变成向上的箭头，位置大小不变，求解？

<template>
<div id="search">
  <el-input placeholder="请输入内容" v-model="input3" class="input-with-select" :style="{height: '45px'}">
    <div class="prepend" slot="prepend">
      <div class="imgIcon">
          <img src="../assets/juejin.png" class="imageIcon" title="掘金" alt="掘金"/>
      </div>
      <div class="el-icon-caret-bottom" @click="putList"
           :style="{fontSize: '20px',marginTop: '5px',cursor:'pointer'}"></div>



    </div>



    <!--    <el-select v-model="select" slot="prepend" placeholder="请选择分类维度">-->

<!--      <el-option value="1" :style="{display:'inline-block',height:'70px'}">-->
<!--        <slot>-->
<!--          <img src="../assets/baidu.png" title="百度" alt="百度"/>-->
<!--        </slot>-->
<!--      </el-option>-->
<!--      <el-option value="2" :style="{display:'inline-block',height:'70px'}">-->
<!--        <slot>-->
<!--          <img src="../assets/google.png" title="谷歌" alt="谷歌"/>-->
<!--        </slot>-->
<!--      </el-option>-->
<!--      <el-option value="3" :style="{display:'inline-block',height:'70px'}">-->
<!--        <slot>-->
<!--          <img src="../assets/juejin.png" title="掘金" alt="掘金"/>-->
<!--        </slot>-->
<!--      </el-option>-->

<!--    </el-select>-->
<!--&lt;!&ndash;    <el-button slot="append" icon="el-icon-search"></el-button>&ndash;&gt;-->
  </el-input>





</div>
</template>

<script>
export default {
  name: "search",
  data() {
    return {

      input3: '',
      // select:'1'
    }
  },
  methods:{
    putList(){
      var downIcon=document.getElementsByClassName('el-icon-caret-bottom')
      console.log(downIcon)
      downIcon[0].style=('transform:rotate(180deg);transition: 0.4s')
    }
  }



}
</script>




<style scoped>
div.prepend{
  display: flex;
}

div.imgIcon{
  padding:0 6px;

}

img.imageIcon{
  width: 30px;
  height: 30px;
}


/deep/.el-input__icon{
  position: relative;
  margin-right: -130px;
  margin-top: 5px;
}

/*/deep/is-reserve{*/
/*  transform:none*/
/*}*/


/*.el-icon-caret-bottom:focus{*/
/*  transition: 0.4s;*/
/*  transform: rotate(180deg);*/
/*}*/


#search{
  margin:120px
}
.input-with-select{
  position: relative;
  width: 459px;
  height: 45px;
  margin-top: 2vw;
  background-color:#fff;
  border-radius:50px;

}
/deep/ .el-input-group__prepend {
  background-color: #F5F7FA;
  color: #909399;
   vertical-align: middle;
   display: table-cell;
  position: relative;
  border: 1px solid #DCDFE6;
  border-radius: 50px 0 0 50px;
  padding: 0 5px;
  width: 50px;
  height: 100%;
  white-space: nowrap;


}

img{
  width: 70px;
  height: 70px;
}


/deep/.el-input__inner{
  height: 45px;
}

</style>

Answer 1

用变量来控制icon的icon-class

例如：dynamic_icon_class 就是data里边定义的 icon-class,比如icon-up,icon-down

<i :class="dynamic_icon_class" class="icon"></i>

Answer 2

可是请问如何实现让图标转换之间是有一段转换时间的呢，请赐教，不胜感激

Answer 3

你说的是过渡效果？