Browse Source

chore: 动画效果

es6
guy 3 years ago
parent
commit
a0c6143476
  1. 5
      src/less/base/single/input/checkbox.less
  2. 3
      src/less/base/single/input/radio.less

5
src/less/base/single/input/checkbox.less

@ -4,7 +4,8 @@
& .checkbox-content, &.checkbox-content {
.border-radius(2px);
border: 1px solid @color-bi-border-checkbox;
box-sizing: border-box;
.box-sizing(border-box);
.transition(all .1s);
&:after {
position: absolute;
display: table;
@ -18,6 +19,8 @@
height: 9px;
.box-sizing(border-box);
.transform(rotate(45deg) scale(1) translate(-50%, -50%));
@transition: all .1s cubic-bezier(.71,-.46,.88,.6),opacity .1s;
.transition(@transition);
content: '';
}
&.hover, &:hover {

3
src/less/base/single/input/radio.less

@ -5,6 +5,7 @@
.border-radius(8px);
border: 1px solid @color-bi-border-radio;
.box-sizing(border-box);
.transition(all .1s);
&:after {
content: "";
}
@ -25,6 +26,8 @@
.border-radius(3px);
background-color: @color-bi-background-radio;
.transform(translate(-50%, -50%));
@transition: all .1s cubic-bezier(.71,-.46,.88,.6),opacity .1s;
.transition(@transition);
}
}
}

Loading…
Cancel
Save