mirror/MCSManager
2
0
Fork 1
mirror of https://github.com/MCSManager/MCSManager.git synced 2025-01-18 15:04:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

新增动画元素

Browse Source
This commit is contained in:
suwings 2018-03-12 14:11:21 +08:00
parent 0683b610ed
commit 7c18811a1c
2 changed files with 82 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
public/common/css/common.css
View File

@ -133,6 +133,9 @@ input {
text-align: left;
padding-left: 20px;
font-size: 12px;
/* action */
animation: ActionCommonColorA 1s, ActionMarginLeftA 0.3s;
animation-fill-mode: forwards;
}
#SideColMenu a span {
@ -141,7 +144,10 @@ input {
#SideColMenu a:hover {
text-decoration: none;
background-color: #017EBC;
/* background-color: #017EBC; */
/* action */
animation: ActionCommonColorB 0.3s, ActionMarginLeftB 0.2s;
animation-fill-mode: forwards;
}
/*菜单的收缩*/
@ -158,6 +164,15 @@ input {
border-radius: 2px;
cursor: pointer;
box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.25);
animation: ActionLeftButtonA 0.5s;
animation-fill-mode: forwards;
}
#ShowMenu:hover {
/* action */
animation: ActionLeftButtonB 0.5s;
animation-fill-mode: forwards;
/* animation-iteration-count: infinite; */
}
/*针对于单页的首页容器*/
@ -274,4 +289,58 @@ input {
width: 100%;
overflow: hidden;
line-height: 3px;
}
/* 动画 CSS */
@keyframes ActionLeftButtonA {
0% {
background-color: rgb(226, 226, 0);
width: 20px;
}
100% {
width: 8px;
background-color: #4ebd2a;
}
}
@keyframes ActionLeftButtonB {
100% {
width: 20px;
background-color: rgb(226, 226, 0);
}
}
/* 公共颜色动作 */
@keyframes ActionCommonColorA {
0% {
background-color: rgb(1, 126, 188);
}
100% {
background-color: initial;
}
}
@keyframes ActionCommonColorB {
100% {
background-color: rgb(1, 126, 188);
}
}
/* 公共左边突出动作 */
@keyframes ActionMarginLeftA {
0% {
margin-left: 8px;
}
100% {
margin-left: 0px;
}
}
@keyframes ActionMarginLeftB {
100% {
margin-left: 8px;
}
}

24
public/common/js/viewmodel.js
View File

@ -74,18 +74,18 @@
RES.redirectPage(link, api, 'update_page');
},
onMouse: function ($event, flag) {
var $elem = $event.target;
if (flag) {
//进入
$($elem).stop(true, true).animate({
'padding-left': '24px'
}, 200);
} else {
//移出
$($elem).stop(true, true).animate({
'padding-left': '20px'
}, 200);
}
// var $elem = $event.target;
// if (flag) {
// //进入
// $($elem).stop(true, true).animate({
// 'padding-left': '24px'
// }, 200);
// } else {
// //移出
// $($elem).stop(true, true).animate({
// 'padding-left': '20px'
// }, 200);
// }
}
}
});