css实现点击按钮进行右移的动画

html页面：

<div v-if="hideTip" id="tipsButton">

      <el-tooltip class="item" effect="dark" content="打印表格" placement="top">

        <el-button icon="el-icon-printer" style="float: right;margin-top: 5px;margin-left: 5px;" circle size="mini" @click="billPrintClick"></el-button>

      </el-tooltip>

      <el-tooltip class="item" effect="dark" content="显示/隐藏表格列" placement="top">

        <el-button icon="el-icon-edit" style="float: right;margin-top: 5px;margin-left: 5px;" circle size="mini" @click="showTrans"></el-button>

      </el-tooltip>

      <el-tooltip class="item" effect="dark" content="刷新表格" placement="top">

        <el-button icon="el-icon-refresh" style="float: right;margin-top: 5px;" circle size="mini" @click="refreshTable"></el-button>

      </el-tooltip>

</div>

 

js:

<script>

.....

methods: {

    hideTips(){//隐藏/显示 表单工具按钮

      if(this.hideTip){//判断是否已经隐藏了

        tipsButton.classList.add('rightGo')//给id="tipsButton"的元素，添加右移动画

        setTimeout(() => {//0.5秒后进行隐藏

          this.hideTip=!this.hideTip

        }, 500)

      }else{

        this.hideTip=!this.hideTip

      }

    },

.....

</script>

 

css:

/* 动画设置0.5秒 */

#tipsButton{

  transition:all 0.5s;

}

/* 动画右移按X轴，130px */

#tipsButton.rightGo{

  transform:translateX(130px);

}

最终效果：