1、在App.vue页面添加公共样式,这样所有使用下拉框,选择器,消息提示框都会有动画效果。
2、样式添加
下拉框动画,时间选择器动画
<style>
@keyframes fideIn {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
文字提示框动画
<style>
@keyframes fideSelectIn {
0% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
</style>
3、使用动画
<style>
// 下拉框动画
.el-select-dropdown {
animation: fideSelectIn 300ms;
}
// 时间选择器动画
.el-picker-panel__body {
animation: fideSelectIn 300ms;
}
// 文字提示框动画
.el-popover {
animation: fideIn 300ms;
}
</style>