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);
}
最终效果：
标签：右移,动画,hideTip,tipsButton,0.5,css From： https://www.cnblogs.com/luzanzan/p/17457106.html