vue+css让新增元素背景闪烁一次
【vue+css让新增元素背景闪烁一次】工作中要做一个上传文件面板，初始化时面板部分有已上传文件列表。
根据ant-design设计原则中解释刚刚发生了什么
原则，我想让新上传的文件行闪烁一下。
于是就有了下面的代码，新增了.blink的css，增加到新增行里去。现在准备出去玩，所以直截了当贴代码，(相关代码ctrl+f搜索'blink'就可以了)：
{{loanDocument.name}}
{{loanDocument.description}}
{{file.name}}
{{file.name}}
@-webkit-keyframes blink {
0% {
background-color: #eff1f6;
opacity:1;
}
50% {
background-color: #fefade;
}
100% {
background-color: #eff1f6;
}
}.blink {
-webkit-animation-name: blink;
-webkit-animation-duration: 2000ms;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
}
>>> .vue-progress-path {
width: 40px !important;
height: 40px !important;
display: flex;
justify-content: center;
align-items: center;
}
>>> .vue-progress-path path {
stroke-width: 10;
}>>> .vue-progress-path .progress {
stroke: #1f84be;
}>>> .vue-progress-path .background {
stroke: #ddd;
}
.btn.btn-primary{
background: #1483c0;
background: #1483c0;
border:none;
display:flex;
justify-content:center;
align-items:center;
position:relative;
width:100px;
}
.documents-uploader-container{
padding: 0 15px;
}
.documents-uploader-header{
font-size: 20px;
padding: 15px 0 0;
font-weight: 500;
}
.documents-uploader-question-mark{
color:#fdc130;
display: flex;
align-items: center;
font-size: 20px;
padding: 15px 0;
}
.fa.fa-question-circle{
font-size: 30px;
}
.documents-uploader-area{
border: 1px solid #f2f2f2;
padding: 10px;
}
.documents-uploader-documents-list > div{
display: flex;
margin-top: 5px;
background: #eff1f6;
align-items: center;
color: #1483c0;
justify-content: space-between;
}
.documents-uploader-documents-list span{
/* flex:1;
*/
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.operation-btn{
display: flex;
/* width: 80px;
*/
padding-left: 10px;
padding-right: 10px;
align-items: center;
/* justify-content: space-around;
*/
}
.operation-btn > i{
font-size: 25px;
transition: color 0.15s ease-in-out;
}
.operation-btn > i:active{
color: #0e6fc9;
}
.upload-file-input{
background:#f00;
position:absolute;
width:10px;
opacity:0;
left:0;
top:0;
height: 100%;
width:100%;
}
/* uploading part */
.uploaded-file-container{
padding: 10px 15px;
}
.uploading-file-container{
position:relative;
}
.file-uploading-progress-bar{
transition:width 1s ease;
position:absolute;
height:100%;
/* width:10%;
*/
background:#1f84be;
z-index:0
}
.file-uploading-detail-wrapper{
color:#fff;
padding: 10px 15px;
display:flex;
flex:1;
justify-content:space-between;
align-items:center;
flex-direction:row;
width:100%;
z-index:1;
}
/* uploading part end*/推荐阅读
- 诗歌:|诗歌: 《让我们举起世界杯，干了！》
- 微习惯复盘
- 研学让生活更美好
- 让爱永驻心中
- 让眼泪滑落，成为骄傲(三十九)
- 不让记忆、感觉、情绪成为孩子的负累|不让记忆、感觉、情绪成为孩子的负累|《全脑教养法》（四）
- 句子分享
- 感恩遇见长投-让我重新审视自己
- 哪一本书让我感动过（）
- 推倒心灵的墙，让爱继续流动