Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
984f2b0f
N
nutui
项目概览
京东前端
/
nutui
通知
37
Star
4
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode，发现更多精彩内容 >>
提交
984f2b0f
编写于
12月 09, 2021
作者:
R
richard1015
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
deploy:
a610fcd1
上级
c9f1545a
变更
34
展开全部
隐藏空白更改
内联
并排
Showing
34 changed file
with
35 addition
and
35 deletion
+35
-35
3.1.12/demo.css
3.1.12/demo.css
+1
-1
3.1.12/demo10.css
3.1.12/demo10.css
+1
-1
3.1.12/demo11.css
3.1.12/demo11.css
+1
-1
3.1.12/demo12.css
3.1.12/demo12.css
+1
-1
3.1.12/demo13.css
3.1.12/demo13.css
+1
-1
3.1.12/demo14.css
3.1.12/demo14.css
+1
-1
3.1.12/demo15.css
3.1.12/demo15.css
+1
-1
3.1.12/demo16.css
3.1.12/demo16.css
+1
-1
3.1.12/demo17.css
3.1.12/demo17.css
+1
-1
3.1.12/demo18.css
3.1.12/demo18.css
+1
-1
3.1.12/demo19.css
3.1.12/demo19.css
+1
-1
3.1.12/demo2.css
3.1.12/demo2.css
+1
-1
3.1.12/demo20.css
3.1.12/demo20.css
+1
-1
3.1.12/demo21.css
3.1.12/demo21.css
+1
-1
3.1.12/demo22.css
3.1.12/demo22.css
+1
-1
3.1.12/demo23.css
3.1.12/demo23.css
+1
-1
3.1.12/demo24.css
3.1.12/demo24.css
+1
-1
3.1.12/demo25.css
3.1.12/demo25.css
+1
-1
3.1.12/demo26.css
3.1.12/demo26.css
+1
-1
3.1.12/demo27.css
3.1.12/demo27.css
+1
-1
3.1.12/demo28.css
3.1.12/demo28.css
+1
-1
3.1.12/demo3.css
3.1.12/demo3.css
+1
-1
3.1.12/demo30.css
3.1.12/demo30.css
+1
-1
3.1.12/demo31.css
3.1.12/demo31.css
+1
-1
3.1.12/demo32.css
3.1.12/demo32.css
+1
-1
3.1.12/demo33.css
3.1.12/demo33.css
+1
-1
3.1.12/demo34.css
3.1.12/demo34.css
+1
-1
3.1.12/demo35.css
3.1.12/demo35.css
+1
-1
3.1.12/demo5.css
3.1.12/demo5.css
+1
-1
3.1.12/demo6.css
3.1.12/demo6.css
+1
-1
3.1.12/demo7.css
3.1.12/demo7.css
+1
-1
3.1.12/demo8.css
3.1.12/demo8.css
+1
-1
3.1.12/demo9.css
3.1.12/demo9.css
+1
-1
3.1.12/mobile.js
3.1.12/mobile.js
+2
-2
未找到文件。
3.1.12/demo.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
eff9bb5a
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-eff9bb5a
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-eff9bb5a
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-eff9bb5a
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-eff9bb5a
],
.nutFadeIn
[
data-v-eff9bb5a
],
.nutFade-leave-active
[
data-v-eff9bb5a
],
.nutFadeOut
[
data-v-eff9bb5a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-eff9bb5a
],
.nutFadeIn
[
data-v-eff9bb5a
]
{
-webkit-animation-name
:
nutFadeIn-eff9bb5a
;
animation-name
:
nutFadeIn-eff9bb5a
}
.nutFade-leave-active
[
data-v-eff9bb5a
],
.nutFadeOut
[
data-v-eff9bb5a
]
{
-webkit-animation-name
:
nutFadeOut-eff9bb5a
;
animation-name
:
nutFadeOut-eff9bb5a
}
@-webkit-keyframes
nutZoomIn-eff9bb5a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-eff9bb5a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-eff9bb5a
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-eff9bb5a
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-eff9bb5a
],
.nutZoomIn
[
data-v-eff9bb5a
],
.nutZoom-leave-active
[
data-v-eff9bb5a
],
.nutZoomOut
[
data-v-eff9bb5a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-eff9bb5a
],
.nutZoomIn
[
data-v-eff9bb5a
]
{
-webkit-animation-name
:
nutZoomIn-eff9bb5a
;
animation-name
:
nutZoomIn-eff9bb5a
}
.nutZoom-leave-active
[
data-v-eff9bb5a
],
.nutZoomOut
[
data-v-eff9bb5a
]
{
-webkit-animation-name
:
nutZoomOut-eff9bb5a
;
animation-name
:
nutZoomOut-eff9bb5a
}
@-webkit-keyframes
nutEaseIn-eff9bb5a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-eff9bb5a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-eff9bb5a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-eff9bb5a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-eff9bb5a
],
.nutEaseIn
[
data-v-eff9bb5a
],
.nutEase-leave-active
[
data-v-eff9bb5a
],
.nutEaseOut
[
data-v-eff9bb5a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-eff9bb5a
],
.nutEaseIn
[
data-v-eff9bb5a
]
{
-webkit-animation-name
:
nutEaseIn-eff9bb5a
;
animation-name
:
nutEaseIn-eff9bb5a
}
.nutEase-leave-active
[
data-v-eff9bb5a
],
.nutEaseOut
[
data-v-eff9bb5a
]
{
-webkit-animation-name
:
nutEaseOut-eff9bb5a
;
animation-name
:
nutEaseOut-eff9bb5a
}
@-webkit-keyframes
nutDropIn-eff9bb5a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-eff9bb5a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-eff9bb5a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-eff9bb5a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-eff9bb5a
],
.nutDropIn
[
data-v-eff9bb5a
],
.nutDrop-leave-active
[
data-v-eff9bb5a
],
.nutDropOut
[
data-v-eff9bb5a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-eff9bb5a
],
.nutDropIn
[
data-v-eff9bb5a
]
{
-webkit-animation-name
:
nutDropIn-eff9bb5a
;
animation-name
:
nutDropIn-eff9bb5a
}
.nutDrop-leave-active
[
data-v-eff9bb5a
],
.nutDropOut
[
data-v-eff9bb5a
]
{
-webkit-animation-name
:
nutDropOut-eff9bb5a
;
animation-name
:
nutDropOut-eff9bb5a
}
@-webkit-keyframes
rotation-eff9bb5a
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-eff9bb5a
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-eff9bb5a
],
.nutRotateIn
[
data-v-eff9bb5a
],
.nutRotate-leave-active
[
data-v-eff9bb5a
],
.nutRotateOut
[
data-v-eff9bb5a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-eff9bb5a
],
.nutRotateIn
[
data-v-eff9bb5a
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-eff9bb5a
],
.nutRotateOut
[
data-v-eff9bb5a
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.demo
.nut-cell
[
data-v-eff9bb5a
]
{
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
}
.demo
.nut-cell
.nut-cell__value
[
data-v-eff9bb5a
]
{
margin-right
:
8
px
}
@-webkit-keyframes
nutFadeIn-
abf2808c
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-abf2808c
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-abf2808c
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-abf2808c
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-abf2808c
],
.nutFadeIn
[
data-v-abf2808c
],
.nutFade-leave-active
[
data-v-abf2808c
],
.nutFadeOut
[
data-v-abf2808c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-abf2808c
],
.nutFadeIn
[
data-v-abf2808c
]
{
-webkit-animation-name
:
nutFadeIn-abf2808c
;
animation-name
:
nutFadeIn-abf2808c
}
.nutFade-leave-active
[
data-v-abf2808c
],
.nutFadeOut
[
data-v-abf2808c
]
{
-webkit-animation-name
:
nutFadeOut-abf2808c
;
animation-name
:
nutFadeOut-abf2808c
}
@-webkit-keyframes
nutZoomIn-abf2808c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-abf2808c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-abf2808c
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-abf2808c
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-abf2808c
],
.nutZoomIn
[
data-v-abf2808c
],
.nutZoom-leave-active
[
data-v-abf2808c
],
.nutZoomOut
[
data-v-abf2808c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-abf2808c
],
.nutZoomIn
[
data-v-abf2808c
]
{
-webkit-animation-name
:
nutZoomIn-abf2808c
;
animation-name
:
nutZoomIn-abf2808c
}
.nutZoom-leave-active
[
data-v-abf2808c
],
.nutZoomOut
[
data-v-abf2808c
]
{
-webkit-animation-name
:
nutZoomOut-abf2808c
;
animation-name
:
nutZoomOut-abf2808c
}
@-webkit-keyframes
nutEaseIn-abf2808c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-abf2808c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-abf2808c
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-abf2808c
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-abf2808c
],
.nutEaseIn
[
data-v-abf2808c
],
.nutEase-leave-active
[
data-v-abf2808c
],
.nutEaseOut
[
data-v-abf2808c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-abf2808c
],
.nutEaseIn
[
data-v-abf2808c
]
{
-webkit-animation-name
:
nutEaseIn-abf2808c
;
animation-name
:
nutEaseIn-abf2808c
}
.nutEase-leave-active
[
data-v-abf2808c
],
.nutEaseOut
[
data-v-abf2808c
]
{
-webkit-animation-name
:
nutEaseOut-abf2808c
;
animation-name
:
nutEaseOut-abf2808c
}
@-webkit-keyframes
nutDropIn-abf2808c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-abf2808c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-abf2808c
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-abf2808c
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-abf2808c
],
.nutDropIn
[
data-v-abf2808c
],
.nutDrop-leave-active
[
data-v-abf2808c
],
.nutDropOut
[
data-v-abf2808c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-abf2808c
],
.nutDropIn
[
data-v-abf2808c
]
{
-webkit-animation-name
:
nutDropIn-abf2808c
;
animation-name
:
nutDropIn-abf2808c
}
.nutDrop-leave-active
[
data-v-abf2808c
],
.nutDropOut
[
data-v-abf2808c
]
{
-webkit-animation-name
:
nutDropOut-abf2808c
;
animation-name
:
nutDropOut-abf2808c
}
@-webkit-keyframes
rotation-abf2808c
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-abf2808c
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-abf2808c
],
.nutRotateIn
[
data-v-abf2808c
],
.nutRotate-leave-active
[
data-v-abf2808c
],
.nutRotateOut
[
data-v-abf2808c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-abf2808c
],
.nutRotateIn
[
data-v-abf2808c
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-abf2808c
],
.nutRotateOut
[
data-v-abf2808c
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.custom-wrap
[
data-v-abf2808c
]
{
padding
:
110px
0
;
text-align
:
center
}
.nut-cell
[
data-v-abf2808c
]
{
-webkit-box-pack
:
justify
;
-ms-flex-pack
:
justify
;
justify-content
:
space-between
}
.myContent
[
data-v-abf2808c
]
{
padding
:
10px
10px
160
px
}
3.1.12/demo10.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
935b4d74
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-935b4d74
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-935b4d74
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-935b4d74
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-935b4d74
],
.nutFadeIn
[
data-v-935b4d74
],
.nutFade-leave-active
[
data-v-935b4d74
],
.nutFadeOut
[
data-v-935b4d74
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-935b4d74
],
.nutFadeIn
[
data-v-935b4d74
]
{
-webkit-animation-name
:
nutFadeIn-935b4d74
;
animation-name
:
nutFadeIn-935b4d74
}
.nutFade-leave-active
[
data-v-935b4d74
],
.nutFadeOut
[
data-v-935b4d74
]
{
-webkit-animation-name
:
nutFadeOut-935b4d74
;
animation-name
:
nutFadeOut-935b4d74
}
@-webkit-keyframes
nutZoomIn-935b4d74
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-935b4d74
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-935b4d74
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-935b4d74
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-935b4d74
],
.nutZoomIn
[
data-v-935b4d74
],
.nutZoom-leave-active
[
data-v-935b4d74
],
.nutZoomOut
[
data-v-935b4d74
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-935b4d74
],
.nutZoomIn
[
data-v-935b4d74
]
{
-webkit-animation-name
:
nutZoomIn-935b4d74
;
animation-name
:
nutZoomIn-935b4d74
}
.nutZoom-leave-active
[
data-v-935b4d74
],
.nutZoomOut
[
data-v-935b4d74
]
{
-webkit-animation-name
:
nutZoomOut-935b4d74
;
animation-name
:
nutZoomOut-935b4d74
}
@-webkit-keyframes
nutEaseIn-935b4d74
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-935b4d74
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-935b4d74
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-935b4d74
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-935b4d74
],
.nutEaseIn
[
data-v-935b4d74
],
.nutEase-leave-active
[
data-v-935b4d74
],
.nutEaseOut
[
data-v-935b4d74
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-935b4d74
],
.nutEaseIn
[
data-v-935b4d74
]
{
-webkit-animation-name
:
nutEaseIn-935b4d74
;
animation-name
:
nutEaseIn-935b4d74
}
.nutEase-leave-active
[
data-v-935b4d74
],
.nutEaseOut
[
data-v-935b4d74
]
{
-webkit-animation-name
:
nutEaseOut-935b4d74
;
animation-name
:
nutEaseOut-935b4d74
}
@-webkit-keyframes
nutDropIn-935b4d74
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-935b4d74
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-935b4d74
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-935b4d74
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-935b4d74
],
.nutDropIn
[
data-v-935b4d74
],
.nutDrop-leave-active
[
data-v-935b4d74
],
.nutDropOut
[
data-v-935b4d74
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-935b4d74
],
.nutDropIn
[
data-v-935b4d74
]
{
-webkit-animation-name
:
nutDropIn-935b4d74
;
animation-name
:
nutDropIn-935b4d74
}
.nutDrop-leave-active
[
data-v-935b4d74
],
.nutDropOut
[
data-v-935b4d74
]
{
-webkit-animation-name
:
nutDropOut-935b4d74
;
animation-name
:
nutDropOut-935b4d74
}
@-webkit-keyframes
rotation-935b4d74
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-935b4d74
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-935b4d74
],
.nutRotateIn
[
data-v-935b4d74
],
.nutRotate-leave-active
[
data-v-935b4d74
],
.nutRotateOut
[
data-v-935b4d74
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-935b4d74
],
.nutRotateIn
[
data-v-935b4d74
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-935b4d74
],
.nutRotateOut
[
data-v-935b4d74
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.nut-cell
>
.nutui-iconfont
[
data-v-935b4d74
]
{
margin-right
:
10px
}
ul
[
data-v-935b4d74
]
{
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-ms-flex-wrap
:
wrap
;
flex-wrap
:
wrap
;
padding
:
0
}
ul
li
[
data-v-935b4d74
]
{
-webkit-box-flex
:
0
;
-ms-flex
:
0
0
25%
;
flex
:
0
0
25%
;
max-width
:
25%
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
-ms-flex-direction
:
column
;
flex-direction
:
column
;
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
;
-webkit-box-pack
:
center
;
-ms-flex-pack
:
center
;
justify-content
:
center
}
ul
li
span
[
data-v-935b4d74
]
{
height
:
40px
;
font-size
:
12px
;
text-align
:
center
}
ul
li
.nutui-iconfont
[
data-v-935b4d74
]
{
margin
:
16px
0
}
@-webkit-keyframes
nutFadeIn-
5389677a
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-5389677a
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-5389677a
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-5389677a
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-5389677a
],
.nutFadeIn
[
data-v-5389677a
],
.nutFade-leave-active
[
data-v-5389677a
],
.nutFadeOut
[
data-v-5389677a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-5389677a
],
.nutFadeIn
[
data-v-5389677a
]
{
-webkit-animation-name
:
nutFadeIn-5389677a
;
animation-name
:
nutFadeIn-5389677a
}
.nutFade-leave-active
[
data-v-5389677a
],
.nutFadeOut
[
data-v-5389677a
]
{
-webkit-animation-name
:
nutFadeOut-5389677a
;
animation-name
:
nutFadeOut-5389677a
}
@-webkit-keyframes
nutZoomIn-5389677a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-5389677a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-5389677a
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-5389677a
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-5389677a
],
.nutZoomIn
[
data-v-5389677a
],
.nutZoom-leave-active
[
data-v-5389677a
],
.nutZoomOut
[
data-v-5389677a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-5389677a
],
.nutZoomIn
[
data-v-5389677a
]
{
-webkit-animation-name
:
nutZoomIn-5389677a
;
animation-name
:
nutZoomIn-5389677a
}
.nutZoom-leave-active
[
data-v-5389677a
],
.nutZoomOut
[
data-v-5389677a
]
{
-webkit-animation-name
:
nutZoomOut-5389677a
;
animation-name
:
nutZoomOut-5389677a
}
@-webkit-keyframes
nutEaseIn-5389677a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-5389677a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-5389677a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-5389677a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-5389677a
],
.nutEaseIn
[
data-v-5389677a
],
.nutEase-leave-active
[
data-v-5389677a
],
.nutEaseOut
[
data-v-5389677a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-5389677a
],
.nutEaseIn
[
data-v-5389677a
]
{
-webkit-animation-name
:
nutEaseIn-5389677a
;
animation-name
:
nutEaseIn-5389677a
}
.nutEase-leave-active
[
data-v-5389677a
],
.nutEaseOut
[
data-v-5389677a
]
{
-webkit-animation-name
:
nutEaseOut-5389677a
;
animation-name
:
nutEaseOut-5389677a
}
@-webkit-keyframes
nutDropIn-5389677a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-5389677a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-5389677a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-5389677a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-5389677a
],
.nutDropIn
[
data-v-5389677a
],
.nutDrop-leave-active
[
data-v-5389677a
],
.nutDropOut
[
data-v-5389677a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-5389677a
],
.nutDropIn
[
data-v-5389677a
]
{
-webkit-animation-name
:
nutDropIn-5389677a
;
animation-name
:
nutDropIn-5389677a
}
.nutDrop-leave-active
[
data-v-5389677a
],
.nutDropOut
[
data-v-5389677a
]
{
-webkit-animation-name
:
nutDropOut-5389677a
;
animation-name
:
nutDropOut-5389677a
}
@-webkit-keyframes
rotation-5389677a
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-5389677a
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-5389677a
],
.nutRotateIn
[
data-v-5389677a
],
.nutRotate-leave-active
[
data-v-5389677a
],
.nutRotateOut
[
data-v-5389677a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-5389677a
],
.nutRotateIn
[
data-v-5389677a
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-5389677a
],
.nutRotateOut
[
data-v-5389677a
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.nut-badge
[
data-v-5389677a
]
{
margin-right
:
40px
}
3.1.12/demo11.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
16cc7403
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-16cc7403
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-16cc7403
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-16cc7403
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-16cc7403
],
.nutFadeIn
[
data-v-16cc7403
],
.nutFade-leave-active
[
data-v-16cc7403
],
.nutFadeOut
[
data-v-16cc7403
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-16cc7403
],
.nutFadeIn
[
data-v-16cc7403
]
{
-webkit-animation-name
:
nutFadeIn-16cc7403
;
animation-name
:
nutFadeIn-16cc7403
}
.nutFade-leave-active
[
data-v-16cc7403
],
.nutFadeOut
[
data-v-16cc7403
]
{
-webkit-animation-name
:
nutFadeOut-16cc7403
;
animation-name
:
nutFadeOut-16cc7403
}
@-webkit-keyframes
nutZoomIn-16cc7403
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-16cc7403
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-16cc7403
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-16cc7403
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-16cc7403
],
.nutZoomIn
[
data-v-16cc7403
],
.nutZoom-leave-active
[
data-v-16cc7403
],
.nutZoomOut
[
data-v-16cc7403
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-16cc7403
],
.nutZoomIn
[
data-v-16cc7403
]
{
-webkit-animation-name
:
nutZoomIn-16cc7403
;
animation-name
:
nutZoomIn-16cc7403
}
.nutZoom-leave-active
[
data-v-16cc7403
],
.nutZoomOut
[
data-v-16cc7403
]
{
-webkit-animation-name
:
nutZoomOut-16cc7403
;
animation-name
:
nutZoomOut-16cc7403
}
@-webkit-keyframes
nutEaseIn-16cc7403
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-16cc7403
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-16cc7403
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-16cc7403
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-16cc7403
],
.nutEaseIn
[
data-v-16cc7403
],
.nutEase-leave-active
[
data-v-16cc7403
],
.nutEaseOut
[
data-v-16cc7403
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-16cc7403
],
.nutEaseIn
[
data-v-16cc7403
]
{
-webkit-animation-name
:
nutEaseIn-16cc7403
;
animation-name
:
nutEaseIn-16cc7403
}
.nutEase-leave-active
[
data-v-16cc7403
],
.nutEaseOut
[
data-v-16cc7403
]
{
-webkit-animation-name
:
nutEaseOut-16cc7403
;
animation-name
:
nutEaseOut-16cc7403
}
@-webkit-keyframes
nutDropIn-16cc7403
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-16cc7403
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-16cc7403
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-16cc7403
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-16cc7403
],
.nutDropIn
[
data-v-16cc7403
],
.nutDrop-leave-active
[
data-v-16cc7403
],
.nutDropOut
[
data-v-16cc7403
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-16cc7403
],
.nutDropIn
[
data-v-16cc7403
]
{
-webkit-animation-name
:
nutDropIn-16cc7403
;
animation-name
:
nutDropIn-16cc7403
}
.nutDrop-leave-active
[
data-v-16cc7403
],
.nutDropOut
[
data-v-16cc7403
]
{
-webkit-animation-name
:
nutDropOut-16cc7403
;
animation-name
:
nutDropOut-16cc7403
}
@-webkit-keyframes
rotation-16cc7403
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-16cc7403
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-16cc7403
],
.nutRotateIn
[
data-v-16cc7403
],
.nutRotate-leave-active
[
data-v-16cc7403
],
.nutRotateOut
[
data-v-16cc7403
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-16cc7403
],
.nutRotateIn
[
data-v-16cc7403
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-16cc7403
],
.nutRotateOut
[
data-v-16cc7403
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
@-webkit-keyframes
nutFadeIn-
0074b136
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-0074b136
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-0074b136
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-0074b136
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-0074b136
],
.nutFadeIn
[
data-v-0074b136
],
.nutFade-leave-active
[
data-v-0074b136
],
.nutFadeOut
[
data-v-0074b136
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-0074b136
],
.nutFadeIn
[
data-v-0074b136
]
{
-webkit-animation-name
:
nutFadeIn-0074b136
;
animation-name
:
nutFadeIn-0074b136
}
.nutFade-leave-active
[
data-v-0074b136
],
.nutFadeOut
[
data-v-0074b136
]
{
-webkit-animation-name
:
nutFadeOut-0074b136
;
animation-name
:
nutFadeOut-0074b136
}
@-webkit-keyframes
nutZoomIn-0074b136
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-0074b136
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-0074b136
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-0074b136
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-0074b136
],
.nutZoomIn
[
data-v-0074b136
],
.nutZoom-leave-active
[
data-v-0074b136
],
.nutZoomOut
[
data-v-0074b136
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-0074b136
],
.nutZoomIn
[
data-v-0074b136
]
{
-webkit-animation-name
:
nutZoomIn-0074b136
;
animation-name
:
nutZoomIn-0074b136
}
.nutZoom-leave-active
[
data-v-0074b136
],
.nutZoomOut
[
data-v-0074b136
]
{
-webkit-animation-name
:
nutZoomOut-0074b136
;
animation-name
:
nutZoomOut-0074b136
}
@-webkit-keyframes
nutEaseIn-0074b136
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-0074b136
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-0074b136
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-0074b136
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-0074b136
],
.nutEaseIn
[
data-v-0074b136
],
.nutEase-leave-active
[
data-v-0074b136
],
.nutEaseOut
[
data-v-0074b136
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-0074b136
],
.nutEaseIn
[
data-v-0074b136
]
{
-webkit-animation-name
:
nutEaseIn-0074b136
;
animation-name
:
nutEaseIn-0074b136
}
.nutEase-leave-active
[
data-v-0074b136
],
.nutEaseOut
[
data-v-0074b136
]
{
-webkit-animation-name
:
nutEaseOut-0074b136
;
animation-name
:
nutEaseOut-0074b136
}
@-webkit-keyframes
nutDropIn-0074b136
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-0074b136
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-0074b136
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-0074b136
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-0074b136
],
.nutDropIn
[
data-v-0074b136
],
.nutDrop-leave-active
[
data-v-0074b136
],
.nutDropOut
[
data-v-0074b136
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-0074b136
],
.nutDropIn
[
data-v-0074b136
]
{
-webkit-animation-name
:
nutDropIn-0074b136
;
animation-name
:
nutDropIn-0074b136
}
.nutDrop-leave-active
[
data-v-0074b136
],
.nutDropOut
[
data-v-0074b136
]
{
-webkit-animation-name
:
nutDropOut-0074b136
;
animation-name
:
nutDropOut-0074b136
}
@-webkit-keyframes
rotation-0074b136
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-0074b136
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-0074b136
],
.nutRotateIn
[
data-v-0074b136
],
.nutRotate-leave-active
[
data-v-0074b136
],
.nutRotateOut
[
data-v-0074b136
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-0074b136
],
.nutRotateIn
[
data-v-0074b136
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-0074b136
],
.nutRotateOut
[
data-v-0074b136
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.search_prolist_attr
[
data-v-0074b136
]
{
margin
:
3px
0
1px
;
height
:
15px
;
overflow
:
hidden
}
.search_prolist_attr
>
span
[
data-v-0074b136
]
{
float
:
left
;
padding
:
0
5px
;
border-radius
:
1px
;
font-size
:
10px
;
height
:
15px
;
line-height
:
15px
;
color
:
#999
;
background-color
:
#f2f2f7
;
margin-right
:
5px
}
.tag
[
data-v-0074b136
]
{
display
:
inline-block
;
vertical-align
:
middle
;
margin-right
:
5px
;
margin-left
:
2px
;
height
:
14px
}
.customize
[
data-v-0074b136
]
{
font-size
:
12px
}
3.1.12/demo12.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
0507319a
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-0507319a
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-0507319a
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-0507319a
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-0507319a
],
.nutFadeIn
[
data-v-0507319a
],
.nutFade-leave-active
[
data-v-0507319a
],
.nutFadeOut
[
data-v-0507319a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-0507319a
],
.nutFadeIn
[
data-v-0507319a
]
{
-webkit-animation-name
:
nutFadeIn-0507319a
;
animation-name
:
nutFadeIn-0507319a
}
.nutFade-leave-active
[
data-v-0507319a
],
.nutFadeOut
[
data-v-0507319a
]
{
-webkit-animation-name
:
nutFadeOut-0507319a
;
animation-name
:
nutFadeOut-0507319a
}
@-webkit-keyframes
nutZoomIn-0507319a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-0507319a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-0507319a
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-0507319a
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-0507319a
],
.nutZoomIn
[
data-v-0507319a
],
.nutZoom-leave-active
[
data-v-0507319a
],
.nutZoomOut
[
data-v-0507319a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-0507319a
],
.nutZoomIn
[
data-v-0507319a
]
{
-webkit-animation-name
:
nutZoomIn-0507319a
;
animation-name
:
nutZoomIn-0507319a
}
.nutZoom-leave-active
[
data-v-0507319a
],
.nutZoomOut
[
data-v-0507319a
]
{
-webkit-animation-name
:
nutZoomOut-0507319a
;
animation-name
:
nutZoomOut-0507319a
}
@-webkit-keyframes
nutEaseIn-0507319a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-0507319a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-0507319a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-0507319a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-0507319a
],
.nutEaseIn
[
data-v-0507319a
],
.nutEase-leave-active
[
data-v-0507319a
],
.nutEaseOut
[
data-v-0507319a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-0507319a
],
.nutEaseIn
[
data-v-0507319a
]
{
-webkit-animation-name
:
nutEaseIn-0507319a
;
animation-name
:
nutEaseIn-0507319a
}
.nutEase-leave-active
[
data-v-0507319a
],
.nutEaseOut
[
data-v-0507319a
]
{
-webkit-animation-name
:
nutEaseOut-0507319a
;
animation-name
:
nutEaseOut-0507319a
}
@-webkit-keyframes
nutDropIn-0507319a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-0507319a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-0507319a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-0507319a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-0507319a
],
.nutDropIn
[
data-v-0507319a
],
.nutDrop-leave-active
[
data-v-0507319a
],
.nutDropOut
[
data-v-0507319a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-0507319a
],
.nutDropIn
[
data-v-0507319a
]
{
-webkit-animation-name
:
nutDropIn-0507319a
;
animation-name
:
nutDropIn-0507319a
}
.nutDrop-leave-active
[
data-v-0507319a
],
.nutDropOut
[
data-v-0507319a
]
{
-webkit-animation-name
:
nutDropOut-0507319a
;
animation-name
:
nutDropOut-0507319a
}
@-webkit-keyframes
rotation-0507319a
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-0507319a
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-0507319a
],
.nutRotateIn
[
data-v-0507319a
],
.nutRotate-leave-active
[
data-v-0507319a
],
.nutRotateOut
[
data-v-0507319a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-0507319a
],
.nutRotateIn
[
data-v-0507319a
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-0507319a
],
.nutRotateOut
[
data-v-0507319a
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.infiniteUl
[
data-v-0507319a
]
{
height
:
300px
;
width
:
100%
;
padding
:
0
;
margin
:
0
;
overflow-y
:
auto
;
overflow-x
:
hidden
}
.infiniteLi
[
data-v-0507319a
]
{
margin-top
:
10px
;
font-size
:
14px
;
color
:
#646464
;
text-align
:
center
}
.loading
[
data-v-0507319a
]
{
display
:
block
;
width
:
100%
;
text-align
:
center
}
@-webkit-keyframes
nutFadeIn-
725c58ea
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-725c58ea
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-725c58ea
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-725c58ea
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-725c58ea
],
.nutFadeIn
[
data-v-725c58ea
],
.nutFade-leave-active
[
data-v-725c58ea
],
.nutFadeOut
[
data-v-725c58ea
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-725c58ea
],
.nutFadeIn
[
data-v-725c58ea
]
{
-webkit-animation-name
:
nutFadeIn-725c58ea
;
animation-name
:
nutFadeIn-725c58ea
}
.nutFade-leave-active
[
data-v-725c58ea
],
.nutFadeOut
[
data-v-725c58ea
]
{
-webkit-animation-name
:
nutFadeOut-725c58ea
;
animation-name
:
nutFadeOut-725c58ea
}
@-webkit-keyframes
nutZoomIn-725c58ea
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-725c58ea
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-725c58ea
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-725c58ea
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-725c58ea
],
.nutZoomIn
[
data-v-725c58ea
],
.nutZoom-leave-active
[
data-v-725c58ea
],
.nutZoomOut
[
data-v-725c58ea
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-725c58ea
],
.nutZoomIn
[
data-v-725c58ea
]
{
-webkit-animation-name
:
nutZoomIn-725c58ea
;
animation-name
:
nutZoomIn-725c58ea
}
.nutZoom-leave-active
[
data-v-725c58ea
],
.nutZoomOut
[
data-v-725c58ea
]
{
-webkit-animation-name
:
nutZoomOut-725c58ea
;
animation-name
:
nutZoomOut-725c58ea
}
@-webkit-keyframes
nutEaseIn-725c58ea
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-725c58ea
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-725c58ea
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-725c58ea
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-725c58ea
],
.nutEaseIn
[
data-v-725c58ea
],
.nutEase-leave-active
[
data-v-725c58ea
],
.nutEaseOut
[
data-v-725c58ea
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-725c58ea
],
.nutEaseIn
[
data-v-725c58ea
]
{
-webkit-animation-name
:
nutEaseIn-725c58ea
;
animation-name
:
nutEaseIn-725c58ea
}
.nutEase-leave-active
[
data-v-725c58ea
],
.nutEaseOut
[
data-v-725c58ea
]
{
-webkit-animation-name
:
nutEaseOut-725c58ea
;
animation-name
:
nutEaseOut-725c58ea
}
@-webkit-keyframes
nutDropIn-725c58ea
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-725c58ea
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-725c58ea
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-725c58ea
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-725c58ea
],
.nutDropIn
[
data-v-725c58ea
],
.nutDrop-leave-active
[
data-v-725c58ea
],
.nutDropOut
[
data-v-725c58ea
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-725c58ea
],
.nutDropIn
[
data-v-725c58ea
]
{
-webkit-animation-name
:
nutDropIn-725c58ea
;
animation-name
:
nutDropIn-725c58ea
}
.nutDrop-leave-active
[
data-v-725c58ea
],
.nutDropOut
[
data-v-725c58ea
]
{
-webkit-animation-name
:
nutDropOut-725c58ea
;
animation-name
:
nutDropOut-725c58ea
}
@-webkit-keyframes
rotation-725c58ea
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-725c58ea
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-725c58ea
],
.nutRotateIn
[
data-v-725c58ea
],
.nutRotate-leave-active
[
data-v-725c58ea
],
.nutRotateOut
[
data-v-725c58ea
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-725c58ea
],
.nutRotateIn
[
data-v-725c58ea
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-725c58ea
],
.nutRotateOut
[
data-v-725c58ea
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.drag-boundary
[
data-v-725c58ea
]
{
position
:
absolute
;
top
:
360px
;
left
:
8px
;
width
:
300px
;
height
:
200px
;
border
:
1px
solid
red
}
3.1.12/demo13.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
188f9c1a
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-188f9c1a
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-188f9c1a
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-188f9c1a
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-188f9c1a
],
.nutFadeIn
[
data-v-188f9c1a
],
.nutFade-leave-active
[
data-v-188f9c1a
],
.nutFadeOut
[
data-v-188f9c1a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-188f9c1a
],
.nutFadeIn
[
data-v-188f9c1a
]
{
-webkit-animation-name
:
nutFadeIn-188f9c1a
;
animation-name
:
nutFadeIn-188f9c1a
}
.nutFade-leave-active
[
data-v-188f9c1a
],
.nutFadeOut
[
data-v-188f9c1a
]
{
-webkit-animation-name
:
nutFadeOut-188f9c1a
;
animation-name
:
nutFadeOut-188f9c1a
}
@-webkit-keyframes
nutZoomIn-188f9c1a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-188f9c1a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-188f9c1a
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-188f9c1a
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-188f9c1a
],
.nutZoomIn
[
data-v-188f9c1a
],
.nutZoom-leave-active
[
data-v-188f9c1a
],
.nutZoomOut
[
data-v-188f9c1a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-188f9c1a
],
.nutZoomIn
[
data-v-188f9c1a
]
{
-webkit-animation-name
:
nutZoomIn-188f9c1a
;
animation-name
:
nutZoomIn-188f9c1a
}
.nutZoom-leave-active
[
data-v-188f9c1a
],
.nutZoomOut
[
data-v-188f9c1a
]
{
-webkit-animation-name
:
nutZoomOut-188f9c1a
;
animation-name
:
nutZoomOut-188f9c1a
}
@-webkit-keyframes
nutEaseIn-188f9c1a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-188f9c1a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-188f9c1a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-188f9c1a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-188f9c1a
],
.nutEaseIn
[
data-v-188f9c1a
],
.nutEase-leave-active
[
data-v-188f9c1a
],
.nutEaseOut
[
data-v-188f9c1a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-188f9c1a
],
.nutEaseIn
[
data-v-188f9c1a
]
{
-webkit-animation-name
:
nutEaseIn-188f9c1a
;
animation-name
:
nutEaseIn-188f9c1a
}
.nutEase-leave-active
[
data-v-188f9c1a
],
.nutEaseOut
[
data-v-188f9c1a
]
{
-webkit-animation-name
:
nutEaseOut-188f9c1a
;
animation-name
:
nutEaseOut-188f9c1a
}
@-webkit-keyframes
nutDropIn-188f9c1a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-188f9c1a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-188f9c1a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-188f9c1a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-188f9c1a
],
.nutDropIn
[
data-v-188f9c1a
],
.nutDrop-leave-active
[
data-v-188f9c1a
],
.nutDropOut
[
data-v-188f9c1a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-188f9c1a
],
.nutDropIn
[
data-v-188f9c1a
]
{
-webkit-animation-name
:
nutDropIn-188f9c1a
;
animation-name
:
nutDropIn-188f9c1a
}
.nutDrop-leave-active
[
data-v-188f9c1a
],
.nutDropOut
[
data-v-188f9c1a
]
{
-webkit-animation-name
:
nutDropOut-188f9c1a
;
animation-name
:
nutDropOut-188f9c1a
}
@-webkit-keyframes
rotation-188f9c1a
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-188f9c1a
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-188f9c1a
],
.nutRotateIn
[
data-v-188f9c1a
],
.nutRotate-leave-active
[
data-v-188f9c1a
],
.nutRotateOut
[
data-v-188f9c1a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-188f9c1a
],
.nutRotateIn
[
data-v-188f9c1a
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-188f9c1a
],
.nutRotateOut
[
data-v-188f9c1a
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.box-item
[
data-v-188f9c1a
]
{
background
:
#fff
;
margin-bottom
:
20px
;
padding
:
20px
0
}
.demo
.nut-row
[
data-v-188f9c1a
]
{
overflow
:
hidden
}
.demo
.nut-row
:not
(
:last-child
)
.nut-col
[
data-v-188f9c1a
]
{
margin-bottom
:
15px
}
.flex-content
[
data-v-188f9c1a
]
{
line-height
:
40px
;
color
:
#fff
;
text-align
:
center
;
border-radius
:
6px
;
background
:
#ff8881
}
.flex-content.flex-content-light
[
data-v-188f9c1a
]
{
background
:
#ffc7c4
}
.flex-content.flex-content-height
[
data-v-188f9c1a
]
{
height
:
50px
}
@-webkit-keyframes
nutFadeIn-
45de8da5
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-45de8da5
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-45de8da5
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-45de8da5
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-45de8da5
],
.nutFadeIn
[
data-v-45de8da5
],
.nutFade-leave-active
[
data-v-45de8da5
],
.nutFadeOut
[
data-v-45de8da5
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-45de8da5
],
.nutFadeIn
[
data-v-45de8da5
]
{
-webkit-animation-name
:
nutFadeIn-45de8da5
;
animation-name
:
nutFadeIn-45de8da5
}
.nutFade-leave-active
[
data-v-45de8da5
],
.nutFadeOut
[
data-v-45de8da5
]
{
-webkit-animation-name
:
nutFadeOut-45de8da5
;
animation-name
:
nutFadeOut-45de8da5
}
@-webkit-keyframes
nutZoomIn-45de8da5
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-45de8da5
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-45de8da5
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-45de8da5
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-45de8da5
],
.nutZoomIn
[
data-v-45de8da5
],
.nutZoom-leave-active
[
data-v-45de8da5
],
.nutZoomOut
[
data-v-45de8da5
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-45de8da5
],
.nutZoomIn
[
data-v-45de8da5
]
{
-webkit-animation-name
:
nutZoomIn-45de8da5
;
animation-name
:
nutZoomIn-45de8da5
}
.nutZoom-leave-active
[
data-v-45de8da5
],
.nutZoomOut
[
data-v-45de8da5
]
{
-webkit-animation-name
:
nutZoomOut-45de8da5
;
animation-name
:
nutZoomOut-45de8da5
}
@-webkit-keyframes
nutEaseIn-45de8da5
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-45de8da5
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-45de8da5
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-45de8da5
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-45de8da5
],
.nutEaseIn
[
data-v-45de8da5
],
.nutEase-leave-active
[
data-v-45de8da5
],
.nutEaseOut
[
data-v-45de8da5
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-45de8da5
],
.nutEaseIn
[
data-v-45de8da5
]
{
-webkit-animation-name
:
nutEaseIn-45de8da5
;
animation-name
:
nutEaseIn-45de8da5
}
.nutEase-leave-active
[
data-v-45de8da5
],
.nutEaseOut
[
data-v-45de8da5
]
{
-webkit-animation-name
:
nutEaseOut-45de8da5
;
animation-name
:
nutEaseOut-45de8da5
}
@-webkit-keyframes
nutDropIn-45de8da5
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-45de8da5
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-45de8da5
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-45de8da5
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-45de8da5
],
.nutDropIn
[
data-v-45de8da5
],
.nutDrop-leave-active
[
data-v-45de8da5
],
.nutDropOut
[
data-v-45de8da5
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-45de8da5
],
.nutDropIn
[
data-v-45de8da5
]
{
-webkit-animation-name
:
nutDropIn-45de8da5
;
animation-name
:
nutDropIn-45de8da5
}
.nutDrop-leave-active
[
data-v-45de8da5
],
.nutDropOut
[
data-v-45de8da5
]
{
-webkit-animation-name
:
nutDropOut-45de8da5
;
animation-name
:
nutDropOut-45de8da5
}
@-webkit-keyframes
rotation-45de8da5
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-45de8da5
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-45de8da5
],
.nutRotateIn
[
data-v-45de8da5
],
.nutRotate-leave-active
[
data-v-45de8da5
],
.nutRotateOut
[
data-v-45de8da5
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-45de8da5
],
.nutRotateIn
[
data-v-45de8da5
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-45de8da5
],
.nutRotateOut
[
data-v-45de8da5
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.demo
[
data-v-45de8da5
]
{
background-color
:
#fff
!important
}
3.1.12/demo14.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
505a29a8
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-505a29a8
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-505a29a8
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-505a29a8
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-505a29a8
],
.nutFadeIn
[
data-v-505a29a8
],
.nutFade-leave-active
[
data-v-505a29a8
],
.nutFadeOut
[
data-v-505a29a8
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-505a29a8
],
.nutFadeIn
[
data-v-505a29a8
]
{
-webkit-animation-name
:
nutFadeIn-505a29a8
;
animation-name
:
nutFadeIn-505a29a8
}
.nutFade-leave-active
[
data-v-505a29a8
],
.nutFadeOut
[
data-v-505a29a8
]
{
-webkit-animation-name
:
nutFadeOut-505a29a8
;
animation-name
:
nutFadeOut-505a29a8
}
@-webkit-keyframes
nutZoomIn-505a29a8
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-505a29a8
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-505a29a8
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-505a29a8
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-505a29a8
],
.nutZoomIn
[
data-v-505a29a8
],
.nutZoom-leave-active
[
data-v-505a29a8
],
.nutZoomOut
[
data-v-505a29a8
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-505a29a8
],
.nutZoomIn
[
data-v-505a29a8
]
{
-webkit-animation-name
:
nutZoomIn-505a29a8
;
animation-name
:
nutZoomIn-505a29a8
}
.nutZoom-leave-active
[
data-v-505a29a8
],
.nutZoomOut
[
data-v-505a29a8
]
{
-webkit-animation-name
:
nutZoomOut-505a29a8
;
animation-name
:
nutZoomOut-505a29a8
}
@-webkit-keyframes
nutEaseIn-505a29a8
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-505a29a8
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-505a29a8
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-505a29a8
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-505a29a8
],
.nutEaseIn
[
data-v-505a29a8
],
.nutEase-leave-active
[
data-v-505a29a8
],
.nutEaseOut
[
data-v-505a29a8
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-505a29a8
],
.nutEaseIn
[
data-v-505a29a8
]
{
-webkit-animation-name
:
nutEaseIn-505a29a8
;
animation-name
:
nutEaseIn-505a29a8
}
.nutEase-leave-active
[
data-v-505a29a8
],
.nutEaseOut
[
data-v-505a29a8
]
{
-webkit-animation-name
:
nutEaseOut-505a29a8
;
animation-name
:
nutEaseOut-505a29a8
}
@-webkit-keyframes
nutDropIn-505a29a8
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-505a29a8
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-505a29a8
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-505a29a8
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-505a29a8
],
.nutDropIn
[
data-v-505a29a8
],
.nutDrop-leave-active
[
data-v-505a29a8
],
.nutDropOut
[
data-v-505a29a8
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-505a29a8
],
.nutDropIn
[
data-v-505a29a8
]
{
-webkit-animation-name
:
nutDropIn-505a29a8
;
animation-name
:
nutDropIn-505a29a8
}
.nutDrop-leave-active
[
data-v-505a29a8
],
.nutDropOut
[
data-v-505a29a8
]
{
-webkit-animation-name
:
nutDropOut-505a29a8
;
animation-name
:
nutDropOut-505a29a8
}
@-webkit-keyframes
rotation-505a29a8
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-505a29a8
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-505a29a8
],
.nutRotateIn
[
data-v-505a29a8
],
.nutRotate-leave-active
[
data-v-505a29a8
],
.nutRotateOut
[
data-v-505a29a8
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-505a29a8
],
.nutRotateIn
[
data-v-505a29a8
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-505a29a8
],
.nutRotateOut
[
data-v-505a29a8
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.demo
[
data-v-505a29a8
]
{
padding-bottom
:
30px
!important
}
.demo
.interstroll-list
[
data-v-505a29a8
]
{
padding
:
0
10px
;
background
:
#fbf8dc
;
color
:
#d9500b
}
@-webkit-keyframes
nutFadeIn-
935b4d74
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-935b4d74
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-935b4d74
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-935b4d74
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-935b4d74
],
.nutFadeIn
[
data-v-935b4d74
],
.nutFade-leave-active
[
data-v-935b4d74
],
.nutFadeOut
[
data-v-935b4d74
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-935b4d74
],
.nutFadeIn
[
data-v-935b4d74
]
{
-webkit-animation-name
:
nutFadeIn-935b4d74
;
animation-name
:
nutFadeIn-935b4d74
}
.nutFade-leave-active
[
data-v-935b4d74
],
.nutFadeOut
[
data-v-935b4d74
]
{
-webkit-animation-name
:
nutFadeOut-935b4d74
;
animation-name
:
nutFadeOut-935b4d74
}
@-webkit-keyframes
nutZoomIn-935b4d74
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-935b4d74
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-935b4d74
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-935b4d74
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-935b4d74
],
.nutZoomIn
[
data-v-935b4d74
],
.nutZoom-leave-active
[
data-v-935b4d74
],
.nutZoomOut
[
data-v-935b4d74
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-935b4d74
],
.nutZoomIn
[
data-v-935b4d74
]
{
-webkit-animation-name
:
nutZoomIn-935b4d74
;
animation-name
:
nutZoomIn-935b4d74
}
.nutZoom-leave-active
[
data-v-935b4d74
],
.nutZoomOut
[
data-v-935b4d74
]
{
-webkit-animation-name
:
nutZoomOut-935b4d74
;
animation-name
:
nutZoomOut-935b4d74
}
@-webkit-keyframes
nutEaseIn-935b4d74
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-935b4d74
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-935b4d74
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-935b4d74
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-935b4d74
],
.nutEaseIn
[
data-v-935b4d74
],
.nutEase-leave-active
[
data-v-935b4d74
],
.nutEaseOut
[
data-v-935b4d74
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-935b4d74
],
.nutEaseIn
[
data-v-935b4d74
]
{
-webkit-animation-name
:
nutEaseIn-935b4d74
;
animation-name
:
nutEaseIn-935b4d74
}
.nutEase-leave-active
[
data-v-935b4d74
],
.nutEaseOut
[
data-v-935b4d74
]
{
-webkit-animation-name
:
nutEaseOut-935b4d74
;
animation-name
:
nutEaseOut-935b4d74
}
@-webkit-keyframes
nutDropIn-935b4d74
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-935b4d74
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-935b4d74
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-935b4d74
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-935b4d74
],
.nutDropIn
[
data-v-935b4d74
],
.nutDrop-leave-active
[
data-v-935b4d74
],
.nutDropOut
[
data-v-935b4d74
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-935b4d74
],
.nutDropIn
[
data-v-935b4d74
]
{
-webkit-animation-name
:
nutDropIn-935b4d74
;
animation-name
:
nutDropIn-935b4d74
}
.nutDrop-leave-active
[
data-v-935b4d74
],
.nutDropOut
[
data-v-935b4d74
]
{
-webkit-animation-name
:
nutDropOut-935b4d74
;
animation-name
:
nutDropOut-935b4d74
}
@-webkit-keyframes
rotation-935b4d74
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-935b4d74
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-935b4d74
],
.nutRotateIn
[
data-v-935b4d74
],
.nutRotate-leave-active
[
data-v-935b4d74
],
.nutRotateOut
[
data-v-935b4d74
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-935b4d74
],
.nutRotateIn
[
data-v-935b4d74
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-935b4d74
],
.nutRotateOut
[
data-v-935b4d74
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.nut-cell
>
.nutui-iconfont
[
data-v-935b4d74
]
{
margin-right
:
10px
}
ul
[
data-v-935b4d74
]
{
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-ms-flex-wrap
:
wrap
;
flex-wrap
:
wrap
;
padding
:
0
}
ul
li
[
data-v-935b4d74
]
{
-webkit-box-flex
:
0
;
-ms-flex
:
0
0
25%
;
flex
:
0
0
25%
;
max-width
:
25%
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
-ms-flex-direction
:
column
;
flex-direction
:
column
;
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
;
-webkit-box-pack
:
center
;
-ms-flex-pack
:
center
;
justify-content
:
center
}
ul
li
span
[
data-v-935b4d74
]
{
height
:
40px
;
font-size
:
12px
;
text-align
:
center
}
ul
li
.nutui-iconfont
[
data-v-935b4d74
]
{
margin
:
16px
0
}
3.1.12/demo15.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
450535f2
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-450535f2
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-450535f2
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-450535f2
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-450535f2
],
.nutFadeIn
[
data-v-450535f2
],
.nutFade-leave-active
[
data-v-450535f2
],
.nutFadeOut
[
data-v-450535f2
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-450535f2
],
.nutFadeIn
[
data-v-450535f2
]
{
-webkit-animation-name
:
nutFadeIn-450535f2
;
animation-name
:
nutFadeIn-450535f2
}
.nutFade-leave-active
[
data-v-450535f2
],
.nutFadeOut
[
data-v-450535f2
]
{
-webkit-animation-name
:
nutFadeOut-450535f2
;
animation-name
:
nutFadeOut-450535f2
}
@-webkit-keyframes
nutZoomIn-450535f2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-450535f2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-450535f2
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-450535f2
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-450535f2
],
.nutZoomIn
[
data-v-450535f2
],
.nutZoom-leave-active
[
data-v-450535f2
],
.nutZoomOut
[
data-v-450535f2
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-450535f2
],
.nutZoomIn
[
data-v-450535f2
]
{
-webkit-animation-name
:
nutZoomIn-450535f2
;
animation-name
:
nutZoomIn-450535f2
}
.nutZoom-leave-active
[
data-v-450535f2
],
.nutZoomOut
[
data-v-450535f2
]
{
-webkit-animation-name
:
nutZoomOut-450535f2
;
animation-name
:
nutZoomOut-450535f2
}
@-webkit-keyframes
nutEaseIn-450535f2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-450535f2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-450535f2
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-450535f2
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-450535f2
],
.nutEaseIn
[
data-v-450535f2
],
.nutEase-leave-active
[
data-v-450535f2
],
.nutEaseOut
[
data-v-450535f2
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-450535f2
],
.nutEaseIn
[
data-v-450535f2
]
{
-webkit-animation-name
:
nutEaseIn-450535f2
;
animation-name
:
nutEaseIn-450535f2
}
.nutEase-leave-active
[
data-v-450535f2
],
.nutEaseOut
[
data-v-450535f2
]
{
-webkit-animation-name
:
nutEaseOut-450535f2
;
animation-name
:
nutEaseOut-450535f2
}
@-webkit-keyframes
nutDropIn-450535f2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-450535f2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-450535f2
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-450535f2
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-450535f2
],
.nutDropIn
[
data-v-450535f2
],
.nutDrop-leave-active
[
data-v-450535f2
],
.nutDropOut
[
data-v-450535f2
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-450535f2
],
.nutDropIn
[
data-v-450535f2
]
{
-webkit-animation-name
:
nutDropIn-450535f2
;
animation-name
:
nutDropIn-450535f2
}
.nutDrop-leave-active
[
data-v-450535f2
],
.nutDropOut
[
data-v-450535f2
]
{
-webkit-animation-name
:
nutDropOut-450535f2
;
animation-name
:
nutDropOut-450535f2
}
@-webkit-keyframes
rotation-450535f2
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-450535f2
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-450535f2
],
.nutRotateIn
[
data-v-450535f2
],
.nutRotate-leave-active
[
data-v-450535f2
],
.nutRotateOut
[
data-v-450535f2
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-450535f2
],
.nutRotateIn
[
data-v-450535f2
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-450535f2
],
.nutRotateOut
[
data-v-450535f2
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.nut-button
[
data-v-450535f2
]
{
margin-right
:
10px
}
@-webkit-keyframes
nutFadeIn-
16cc7403
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-16cc7403
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-16cc7403
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-16cc7403
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-16cc7403
],
.nutFadeIn
[
data-v-16cc7403
],
.nutFade-leave-active
[
data-v-16cc7403
],
.nutFadeOut
[
data-v-16cc7403
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-16cc7403
],
.nutFadeIn
[
data-v-16cc7403
]
{
-webkit-animation-name
:
nutFadeIn-16cc7403
;
animation-name
:
nutFadeIn-16cc7403
}
.nutFade-leave-active
[
data-v-16cc7403
],
.nutFadeOut
[
data-v-16cc7403
]
{
-webkit-animation-name
:
nutFadeOut-16cc7403
;
animation-name
:
nutFadeOut-16cc7403
}
@-webkit-keyframes
nutZoomIn-16cc7403
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-16cc7403
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-16cc7403
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-16cc7403
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-16cc7403
],
.nutZoomIn
[
data-v-16cc7403
],
.nutZoom-leave-active
[
data-v-16cc7403
],
.nutZoomOut
[
data-v-16cc7403
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-16cc7403
],
.nutZoomIn
[
data-v-16cc7403
]
{
-webkit-animation-name
:
nutZoomIn-16cc7403
;
animation-name
:
nutZoomIn-16cc7403
}
.nutZoom-leave-active
[
data-v-16cc7403
],
.nutZoomOut
[
data-v-16cc7403
]
{
-webkit-animation-name
:
nutZoomOut-16cc7403
;
animation-name
:
nutZoomOut-16cc7403
}
@-webkit-keyframes
nutEaseIn-16cc7403
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-16cc7403
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-16cc7403
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-16cc7403
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-16cc7403
],
.nutEaseIn
[
data-v-16cc7403
],
.nutEase-leave-active
[
data-v-16cc7403
],
.nutEaseOut
[
data-v-16cc7403
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-16cc7403
],
.nutEaseIn
[
data-v-16cc7403
]
{
-webkit-animation-name
:
nutEaseIn-16cc7403
;
animation-name
:
nutEaseIn-16cc7403
}
.nutEase-leave-active
[
data-v-16cc7403
],
.nutEaseOut
[
data-v-16cc7403
]
{
-webkit-animation-name
:
nutEaseOut-16cc7403
;
animation-name
:
nutEaseOut-16cc7403
}
@-webkit-keyframes
nutDropIn-16cc7403
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-16cc7403
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-16cc7403
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-16cc7403
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-16cc7403
],
.nutDropIn
[
data-v-16cc7403
],
.nutDrop-leave-active
[
data-v-16cc7403
],
.nutDropOut
[
data-v-16cc7403
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-16cc7403
],
.nutDropIn
[
data-v-16cc7403
]
{
-webkit-animation-name
:
nutDropIn-16cc7403
;
animation-name
:
nutDropIn-16cc7403
}
.nutDrop-leave-active
[
data-v-16cc7403
],
.nutDropOut
[
data-v-16cc7403
]
{
-webkit-animation-name
:
nutDropOut-16cc7403
;
animation-name
:
nutDropOut-16cc7403
}
@-webkit-keyframes
rotation-16cc7403
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-16cc7403
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-16cc7403
],
.nutRotateIn
[
data-v-16cc7403
],
.nutRotate-leave-active
[
data-v-16cc7403
],
.nutRotateOut
[
data-v-16cc7403
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-16cc7403
],
.nutRotateIn
[
data-v-16cc7403
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-16cc7403
],
.nutRotateOut
[
data-v-16cc7403
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
3.1.12/demo16.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
3325d30e
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-3325d30e
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-3325d30e
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-3325d30e
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-3325d30e
],
.nutFadeIn
[
data-v-3325d30e
],
.nutFade-leave-active
[
data-v-3325d30e
],
.nutFadeOut
[
data-v-3325d30e
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-3325d30e
],
.nutFadeIn
[
data-v-3325d30e
]
{
-webkit-animation-name
:
nutFadeIn-3325d30e
;
animation-name
:
nutFadeIn-3325d30e
}
.nutFade-leave-active
[
data-v-3325d30e
],
.nutFadeOut
[
data-v-3325d30e
]
{
-webkit-animation-name
:
nutFadeOut-3325d30e
;
animation-name
:
nutFadeOut-3325d30e
}
@-webkit-keyframes
nutZoomIn-3325d30e
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-3325d30e
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-3325d30e
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-3325d30e
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-3325d30e
],
.nutZoomIn
[
data-v-3325d30e
],
.nutZoom-leave-active
[
data-v-3325d30e
],
.nutZoomOut
[
data-v-3325d30e
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-3325d30e
],
.nutZoomIn
[
data-v-3325d30e
]
{
-webkit-animation-name
:
nutZoomIn-3325d30e
;
animation-name
:
nutZoomIn-3325d30e
}
.nutZoom-leave-active
[
data-v-3325d30e
],
.nutZoomOut
[
data-v-3325d30e
]
{
-webkit-animation-name
:
nutZoomOut-3325d30e
;
animation-name
:
nutZoomOut-3325d30e
}
@-webkit-keyframes
nutEaseIn-3325d30e
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-3325d30e
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-3325d30e
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-3325d30e
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-3325d30e
],
.nutEaseIn
[
data-v-3325d30e
],
.nutEase-leave-active
[
data-v-3325d30e
],
.nutEaseOut
[
data-v-3325d30e
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-3325d30e
],
.nutEaseIn
[
data-v-3325d30e
]
{
-webkit-animation-name
:
nutEaseIn-3325d30e
;
animation-name
:
nutEaseIn-3325d30e
}
.nutEase-leave-active
[
data-v-3325d30e
],
.nutEaseOut
[
data-v-3325d30e
]
{
-webkit-animation-name
:
nutEaseOut-3325d30e
;
animation-name
:
nutEaseOut-3325d30e
}
@-webkit-keyframes
nutDropIn-3325d30e
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-3325d30e
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-3325d30e
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-3325d30e
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-3325d30e
],
.nutDropIn
[
data-v-3325d30e
],
.nutDrop-leave-active
[
data-v-3325d30e
],
.nutDropOut
[
data-v-3325d30e
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-3325d30e
],
.nutDropIn
[
data-v-3325d30e
]
{
-webkit-animation-name
:
nutDropIn-3325d30e
;
animation-name
:
nutDropIn-3325d30e
}
.nutDrop-leave-active
[
data-v-3325d30e
],
.nutDropOut
[
data-v-3325d30e
]
{
-webkit-animation-name
:
nutDropOut-3325d30e
;
animation-name
:
nutDropOut-3325d30e
}
@-webkit-keyframes
rotation-3325d30e
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-3325d30e
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-3325d30e
],
.nutRotateIn
[
data-v-3325d30e
],
.nutRotate-leave-active
[
data-v-3325d30e
],
.nutRotateOut
[
data-v-3325d30e
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-3325d30e
],
.nutRotateIn
[
data-v-3325d30e
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-3325d30e
],
.nutRotateOut
[
data-v-3325d30e
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.wrapper
[
data-v-3325d30e
]
{
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
height
:
100%
;
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
;
-webkit-box-pack
:
center
;
-ms-flex-pack
:
center
;
justify-content
:
center
}
.wrapper
.content
[
data-v-3325d30e
]
{
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
width
:
150px
;
height
:
150px
;
background
:
#fff
;
border-radius
:
8px
;
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
;
-webkit-box-pack
:
center
;
-ms-flex-pack
:
center
;
justify-content
:
center
;
color
:
red
}
@-webkit-keyframes
nutFadeIn-
0507319a
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-0507319a
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-0507319a
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-0507319a
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-0507319a
],
.nutFadeIn
[
data-v-0507319a
],
.nutFade-leave-active
[
data-v-0507319a
],
.nutFadeOut
[
data-v-0507319a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-0507319a
],
.nutFadeIn
[
data-v-0507319a
]
{
-webkit-animation-name
:
nutFadeIn-0507319a
;
animation-name
:
nutFadeIn-0507319a
}
.nutFade-leave-active
[
data-v-0507319a
],
.nutFadeOut
[
data-v-0507319a
]
{
-webkit-animation-name
:
nutFadeOut-0507319a
;
animation-name
:
nutFadeOut-0507319a
}
@-webkit-keyframes
nutZoomIn-0507319a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-0507319a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-0507319a
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-0507319a
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-0507319a
],
.nutZoomIn
[
data-v-0507319a
],
.nutZoom-leave-active
[
data-v-0507319a
],
.nutZoomOut
[
data-v-0507319a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-0507319a
],
.nutZoomIn
[
data-v-0507319a
]
{
-webkit-animation-name
:
nutZoomIn-0507319a
;
animation-name
:
nutZoomIn-0507319a
}
.nutZoom-leave-active
[
data-v-0507319a
],
.nutZoomOut
[
data-v-0507319a
]
{
-webkit-animation-name
:
nutZoomOut-0507319a
;
animation-name
:
nutZoomOut-0507319a
}
@-webkit-keyframes
nutEaseIn-0507319a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-0507319a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-0507319a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-0507319a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-0507319a
],
.nutEaseIn
[
data-v-0507319a
],
.nutEase-leave-active
[
data-v-0507319a
],
.nutEaseOut
[
data-v-0507319a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-0507319a
],
.nutEaseIn
[
data-v-0507319a
]
{
-webkit-animation-name
:
nutEaseIn-0507319a
;
animation-name
:
nutEaseIn-0507319a
}
.nutEase-leave-active
[
data-v-0507319a
],
.nutEaseOut
[
data-v-0507319a
]
{
-webkit-animation-name
:
nutEaseOut-0507319a
;
animation-name
:
nutEaseOut-0507319a
}
@-webkit-keyframes
nutDropIn-0507319a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-0507319a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-0507319a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-0507319a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-0507319a
],
.nutDropIn
[
data-v-0507319a
],
.nutDrop-leave-active
[
data-v-0507319a
],
.nutDropOut
[
data-v-0507319a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-0507319a
],
.nutDropIn
[
data-v-0507319a
]
{
-webkit-animation-name
:
nutDropIn-0507319a
;
animation-name
:
nutDropIn-0507319a
}
.nutDrop-leave-active
[
data-v-0507319a
],
.nutDropOut
[
data-v-0507319a
]
{
-webkit-animation-name
:
nutDropOut-0507319a
;
animation-name
:
nutDropOut-0507319a
}
@-webkit-keyframes
rotation-0507319a
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-0507319a
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-0507319a
],
.nutRotateIn
[
data-v-0507319a
],
.nutRotate-leave-active
[
data-v-0507319a
],
.nutRotateOut
[
data-v-0507319a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-0507319a
],
.nutRotateIn
[
data-v-0507319a
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-0507319a
],
.nutRotateOut
[
data-v-0507319a
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.infiniteUl
[
data-v-0507319a
]
{
height
:
300px
;
width
:
100%
;
padding
:
0
;
margin
:
0
;
overflow-y
:
auto
;
overflow-x
:
hidden
}
.infiniteLi
[
data-v-0507319a
]
{
margin-top
:
10px
;
font-size
:
14px
;
color
:
#646464
;
text-align
:
center
}
.loading
[
data-v-0507319a
]
{
display
:
block
;
width
:
100%
;
text-align
:
center
}
3.1.12/demo17.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
,
.nutFadeIn
,
.nutFade-leave-active
,
.nutFadeOut
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
,
.nutFadeIn
{
-webkit-animation-name
:
nutFadeIn
;
animation-name
:
nutFadeIn
}
.nutFade-leave-active
,
.nutFadeOut
{
-webkit-animation-name
:
nutFadeOut
;
animation-name
:
nutFadeOut
}
@-webkit-keyframes
nutZoomIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
,
.nutZoomIn
,
.nutZoom-leave-active
,
.nutZoomOut
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
,
.nutZoomIn
{
-webkit-animation-name
:
nutZoomIn
;
animation-name
:
nutZoomIn
}
.nutZoom-leave-active
,
.nutZoomOut
{
-webkit-animation-name
:
nutZoomOut
;
animation-name
:
nutZoomOut
}
@-webkit-keyframes
nutEaseIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
,
.nutEaseIn
,
.nutEase-leave-active
,
.nutEaseOut
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
,
.nutEaseIn
{
-webkit-animation-name
:
nutEaseIn
;
animation-name
:
nutEaseIn
}
.nutEase-leave-active
,
.nutEaseOut
{
-webkit-animation-name
:
nutEaseOut
;
animation-name
:
nutEaseOut
}
@-webkit-keyframes
nutDropIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
,
.nutDropIn
,
.nutDrop-leave-active
,
.nutDropOut
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
,
.nutDropIn
{
-webkit-animation-name
:
nutDropIn
;
animation-name
:
nutDropIn
}
.nutDrop-leave-active
,
.nutDropOut
{
-webkit-animation-name
:
nutDropOut
;
animation-name
:
nutDropOut
}
@-webkit-keyframes
rotation
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
,
.nutRotateIn
,
.nutRotate-leave-active
,
.nutRotateOut
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
,
.nutRotateIn
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
,
.nutRotateOut
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.self-content
{
width
:
195px
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-ms-flex-wrap
:
wrap
;
flex-wrap
:
wrap
}
.self-content-item
{
margin-top
:
10px
;
margin-bottom
:
10px
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-box-pack
:
center
;
-ms-flex-pack
:
center
;
justify-content
:
center
;
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
;
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
-ms-flex-direction
:
column
;
flex-direction
:
column
}
.self-content-desc
{
margin-top
:
5px
;
width
:
60px
;
font-size
:
10px
;
text-align
:
center
}
@-webkit-keyframes
nutFadeIn
-188f9c1a
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-188f9c1a
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-188f9c1a
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-188f9c1a
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-188f9c1a
],
.nutFadeIn
[
data-v-188f9c1a
],
.nutFade-leave-active
[
data-v-188f9c1a
],
.nutFadeOut
[
data-v-188f9c1a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-188f9c1a
],
.nutFadeIn
[
data-v-188f9c1a
]
{
-webkit-animation-name
:
nutFadeIn-188f9c1a
;
animation-name
:
nutFadeIn-188f9c1a
}
.nutFade-leave-active
[
data-v-188f9c1a
],
.nutFadeOut
[
data-v-188f9c1a
]
{
-webkit-animation-name
:
nutFadeOut-188f9c1a
;
animation-name
:
nutFadeOut-188f9c1a
}
@-webkit-keyframes
nutZoomIn-188f9c1a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-188f9c1a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-188f9c1a
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-188f9c1a
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-188f9c1a
],
.nutZoomIn
[
data-v-188f9c1a
],
.nutZoom-leave-active
[
data-v-188f9c1a
],
.nutZoomOut
[
data-v-188f9c1a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-188f9c1a
],
.nutZoomIn
[
data-v-188f9c1a
]
{
-webkit-animation-name
:
nutZoomIn-188f9c1a
;
animation-name
:
nutZoomIn-188f9c1a
}
.nutZoom-leave-active
[
data-v-188f9c1a
],
.nutZoomOut
[
data-v-188f9c1a
]
{
-webkit-animation-name
:
nutZoomOut-188f9c1a
;
animation-name
:
nutZoomOut-188f9c1a
}
@-webkit-keyframes
nutEaseIn-188f9c1a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-188f9c1a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-188f9c1a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-188f9c1a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-188f9c1a
],
.nutEaseIn
[
data-v-188f9c1a
],
.nutEase-leave-active
[
data-v-188f9c1a
],
.nutEaseOut
[
data-v-188f9c1a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-188f9c1a
],
.nutEaseIn
[
data-v-188f9c1a
]
{
-webkit-animation-name
:
nutEaseIn-188f9c1a
;
animation-name
:
nutEaseIn-188f9c1a
}
.nutEase-leave-active
[
data-v-188f9c1a
],
.nutEaseOut
[
data-v-188f9c1a
]
{
-webkit-animation-name
:
nutEaseOut-188f9c1a
;
animation-name
:
nutEaseOut-188f9c1a
}
@-webkit-keyframes
nutDropIn-188f9c1a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-188f9c1a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-188f9c1a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-188f9c1a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-188f9c1a
],
.nutDropIn
[
data-v-188f9c1a
],
.nutDrop-leave-active
[
data-v-188f9c1a
],
.nutDropOut
[
data-v-188f9c1a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-188f9c1a
],
.nutDropIn
[
data-v-188f9c1a
]
{
-webkit-animation-name
:
nutDropIn-188f9c1a
;
animation-name
:
nutDropIn-188f9c1a
}
.nutDrop-leave-active
[
data-v-188f9c1a
],
.nutDropOut
[
data-v-188f9c1a
]
{
-webkit-animation-name
:
nutDropOut-188f9c1a
;
animation-name
:
nutDropOut-188f9c1a
}
@-webkit-keyframes
rotation-188f9c1a
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-188f9c1a
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-188f9c1a
],
.nutRotateIn
[
data-v-188f9c1a
],
.nutRotate-leave-active
[
data-v-188f9c1a
],
.nutRotateOut
[
data-v-188f9c1a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-188f9c1a
],
.nutRotateIn
[
data-v-188f9c1a
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-188f9c1a
],
.nutRotateOut
[
data-v-188f9c1a
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.box-item
[
data-v-188f9c1a
]
{
background
:
#fff
;
margin-bottom
:
20px
;
padding
:
20px
0
}
.demo
.nut-row
[
data-v-188f9c1a
]
{
overflow
:
hidden
}
.demo
.nut-row
:not
(
:last-child
)
.nut-col
[
data-v-188f9c1a
]
{
margin-bottom
:
15px
}
.flex-content
[
data-v-188f9c1a
]
{
line-height
:
40px
;
color
:
#fff
;
text-align
:
center
;
border-radius
:
6px
;
background
:
#ff8881
}
.flex-content.flex-content-light
[
data-v-188f9c1a
]
{
background
:
#ffc7c4
}
.flex-content.flex-content-height
[
data-v-188f9c1a
]
{
height
:
50px
}
3.1.12/demo18.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
1957d0eb
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-1957d0eb
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-1957d0eb
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-1957d0eb
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-1957d0eb
],
.nutFadeIn
[
data-v-1957d0eb
],
.nutFade-leave-active
[
data-v-1957d0eb
],
.nutFadeOut
[
data-v-1957d0eb
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-1957d0eb
],
.nutFadeIn
[
data-v-1957d0eb
]
{
-webkit-animation-name
:
nutFadeIn-1957d0eb
;
animation-name
:
nutFadeIn-1957d0eb
}
.nutFade-leave-active
[
data-v-1957d0eb
],
.nutFadeOut
[
data-v-1957d0eb
]
{
-webkit-animation-name
:
nutFadeOut-1957d0eb
;
animation-name
:
nutFadeOut-1957d0eb
}
@-webkit-keyframes
nutZoomIn-1957d0eb
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-1957d0eb
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-1957d0eb
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-1957d0eb
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-1957d0eb
],
.nutZoomIn
[
data-v-1957d0eb
],
.nutZoom-leave-active
[
data-v-1957d0eb
],
.nutZoomOut
[
data-v-1957d0eb
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-1957d0eb
],
.nutZoomIn
[
data-v-1957d0eb
]
{
-webkit-animation-name
:
nutZoomIn-1957d0eb
;
animation-name
:
nutZoomIn-1957d0eb
}
.nutZoom-leave-active
[
data-v-1957d0eb
],
.nutZoomOut
[
data-v-1957d0eb
]
{
-webkit-animation-name
:
nutZoomOut-1957d0eb
;
animation-name
:
nutZoomOut-1957d0eb
}
@-webkit-keyframes
nutEaseIn-1957d0eb
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-1957d0eb
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-1957d0eb
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-1957d0eb
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-1957d0eb
],
.nutEaseIn
[
data-v-1957d0eb
],
.nutEase-leave-active
[
data-v-1957d0eb
],
.nutEaseOut
[
data-v-1957d0eb
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-1957d0eb
],
.nutEaseIn
[
data-v-1957d0eb
]
{
-webkit-animation-name
:
nutEaseIn-1957d0eb
;
animation-name
:
nutEaseIn-1957d0eb
}
.nutEase-leave-active
[
data-v-1957d0eb
],
.nutEaseOut
[
data-v-1957d0eb
]
{
-webkit-animation-name
:
nutEaseOut-1957d0eb
;
animation-name
:
nutEaseOut-1957d0eb
}
@-webkit-keyframes
nutDropIn-1957d0eb
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-1957d0eb
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-1957d0eb
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-1957d0eb
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-1957d0eb
],
.nutDropIn
[
data-v-1957d0eb
],
.nutDrop-leave-active
[
data-v-1957d0eb
],
.nutDropOut
[
data-v-1957d0eb
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-1957d0eb
],
.nutDropIn
[
data-v-1957d0eb
]
{
-webkit-animation-name
:
nutDropIn-1957d0eb
;
animation-name
:
nutDropIn-1957d0eb
}
.nutDrop-leave-active
[
data-v-1957d0eb
],
.nutDropOut
[
data-v-1957d0eb
]
{
-webkit-animation-name
:
nutDropOut-1957d0eb
;
animation-name
:
nutDropOut-1957d0eb
}
@-webkit-keyframes
rotation-1957d0eb
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-1957d0eb
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-1957d0eb
],
.nutRotateIn
[
data-v-1957d0eb
],
.nutRotate-leave-active
[
data-v-1957d0eb
],
.nutRotateOut
[
data-v-1957d0eb
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-1957d0eb
],
.nutRotateIn
[
data-v-1957d0eb
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-1957d0eb
],
.nutRotateOut
[
data-v-1957d0eb
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.nut-button
[
data-v-1957d0eb
]
{
margin-right
:
10px
}
@-webkit-keyframes
nutFadeIn-
505a29a8
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-505a29a8
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-505a29a8
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-505a29a8
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-505a29a8
],
.nutFadeIn
[
data-v-505a29a8
],
.nutFade-leave-active
[
data-v-505a29a8
],
.nutFadeOut
[
data-v-505a29a8
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-505a29a8
],
.nutFadeIn
[
data-v-505a29a8
]
{
-webkit-animation-name
:
nutFadeIn-505a29a8
;
animation-name
:
nutFadeIn-505a29a8
}
.nutFade-leave-active
[
data-v-505a29a8
],
.nutFadeOut
[
data-v-505a29a8
]
{
-webkit-animation-name
:
nutFadeOut-505a29a8
;
animation-name
:
nutFadeOut-505a29a8
}
@-webkit-keyframes
nutZoomIn-505a29a8
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-505a29a8
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-505a29a8
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-505a29a8
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-505a29a8
],
.nutZoomIn
[
data-v-505a29a8
],
.nutZoom-leave-active
[
data-v-505a29a8
],
.nutZoomOut
[
data-v-505a29a8
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-505a29a8
],
.nutZoomIn
[
data-v-505a29a8
]
{
-webkit-animation-name
:
nutZoomIn-505a29a8
;
animation-name
:
nutZoomIn-505a29a8
}
.nutZoom-leave-active
[
data-v-505a29a8
],
.nutZoomOut
[
data-v-505a29a8
]
{
-webkit-animation-name
:
nutZoomOut-505a29a8
;
animation-name
:
nutZoomOut-505a29a8
}
@-webkit-keyframes
nutEaseIn-505a29a8
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-505a29a8
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-505a29a8
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-505a29a8
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-505a29a8
],
.nutEaseIn
[
data-v-505a29a8
],
.nutEase-leave-active
[
data-v-505a29a8
],
.nutEaseOut
[
data-v-505a29a8
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-505a29a8
],
.nutEaseIn
[
data-v-505a29a8
]
{
-webkit-animation-name
:
nutEaseIn-505a29a8
;
animation-name
:
nutEaseIn-505a29a8
}
.nutEase-leave-active
[
data-v-505a29a8
],
.nutEaseOut
[
data-v-505a29a8
]
{
-webkit-animation-name
:
nutEaseOut-505a29a8
;
animation-name
:
nutEaseOut-505a29a8
}
@-webkit-keyframes
nutDropIn-505a29a8
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-505a29a8
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-505a29a8
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-505a29a8
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-505a29a8
],
.nutDropIn
[
data-v-505a29a8
],
.nutDrop-leave-active
[
data-v-505a29a8
],
.nutDropOut
[
data-v-505a29a8
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-505a29a8
],
.nutDropIn
[
data-v-505a29a8
]
{
-webkit-animation-name
:
nutDropIn-505a29a8
;
animation-name
:
nutDropIn-505a29a8
}
.nutDrop-leave-active
[
data-v-505a29a8
],
.nutDropOut
[
data-v-505a29a8
]
{
-webkit-animation-name
:
nutDropOut-505a29a8
;
animation-name
:
nutDropOut-505a29a8
}
@-webkit-keyframes
rotation-505a29a8
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-505a29a8
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-505a29a8
],
.nutRotateIn
[
data-v-505a29a8
],
.nutRotate-leave-active
[
data-v-505a29a8
],
.nutRotateOut
[
data-v-505a29a8
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-505a29a8
],
.nutRotateIn
[
data-v-505a29a8
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-505a29a8
],
.nutRotateOut
[
data-v-505a29a8
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.demo
[
data-v-505a29a8
]
{
padding-bottom
:
30px
!important
}
.demo
.interstroll-list
[
data-v-505a29a8
]
{
padding
:
0
10px
;
background
:
#fbf8dc
;
color
:
#d9500b
}
3.1.12/demo19.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
02779db4
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-02779db4
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-02779db4
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-02779db4
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-02779db4
],
.nutFadeIn
[
data-v-02779db4
],
.nutFade-leave-active
[
data-v-02779db4
],
.nutFadeOut
[
data-v-02779db4
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-02779db4
],
.nutFadeIn
[
data-v-02779db4
]
{
-webkit-animation-name
:
nutFadeIn-02779db4
;
animation-name
:
nutFadeIn-02779db4
}
.nutFade-leave-active
[
data-v-02779db4
],
.nutFadeOut
[
data-v-02779db4
]
{
-webkit-animation-name
:
nutFadeOut-02779db4
;
animation-name
:
nutFadeOut-02779db4
}
@-webkit-keyframes
nutZoomIn-02779db4
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-02779db4
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-02779db4
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-02779db4
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-02779db4
],
.nutZoomIn
[
data-v-02779db4
],
.nutZoom-leave-active
[
data-v-02779db4
],
.nutZoomOut
[
data-v-02779db4
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-02779db4
],
.nutZoomIn
[
data-v-02779db4
]
{
-webkit-animation-name
:
nutZoomIn-02779db4
;
animation-name
:
nutZoomIn-02779db4
}
.nutZoom-leave-active
[
data-v-02779db4
],
.nutZoomOut
[
data-v-02779db4
]
{
-webkit-animation-name
:
nutZoomOut-02779db4
;
animation-name
:
nutZoomOut-02779db4
}
@-webkit-keyframes
nutEaseIn-02779db4
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-02779db4
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-02779db4
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-02779db4
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-02779db4
],
.nutEaseIn
[
data-v-02779db4
],
.nutEase-leave-active
[
data-v-02779db4
],
.nutEaseOut
[
data-v-02779db4
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-02779db4
],
.nutEaseIn
[
data-v-02779db4
]
{
-webkit-animation-name
:
nutEaseIn-02779db4
;
animation-name
:
nutEaseIn-02779db4
}
.nutEase-leave-active
[
data-v-02779db4
],
.nutEaseOut
[
data-v-02779db4
]
{
-webkit-animation-name
:
nutEaseOut-02779db4
;
animation-name
:
nutEaseOut-02779db4
}
@-webkit-keyframes
nutDropIn-02779db4
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-02779db4
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-02779db4
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-02779db4
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-02779db4
],
.nutDropIn
[
data-v-02779db4
],
.nutDrop-leave-active
[
data-v-02779db4
],
.nutDropOut
[
data-v-02779db4
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-02779db4
],
.nutDropIn
[
data-v-02779db4
]
{
-webkit-animation-name
:
nutDropIn-02779db4
;
animation-name
:
nutDropIn-02779db4
}
.nutDrop-leave-active
[
data-v-02779db4
],
.nutDropOut
[
data-v-02779db4
]
{
-webkit-animation-name
:
nutDropOut-02779db4
;
animation-name
:
nutDropOut-02779db4
}
@-webkit-keyframes
rotation-02779db4
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-02779db4
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-02779db4
],
.nutRotateIn
[
data-v-02779db4
],
.nutRotate-leave-active
[
data-v-02779db4
],
.nutRotateOut
[
data-v-02779db4
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-02779db4
],
.nutRotateIn
[
data-v-02779db4
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-02779db4
],
.nutRotateOut
[
data-v-02779db4
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.vertical
[
data-v-02779db4
]
{
height
:
300px
;
overflow
:
hidden
;
width
:
100%
}
.content
[
data-v-02779db4
]
{
height
:
100%
;
overflow
:
auto
}
.horizontal
[
data-v-02779db4
]
{
width
:
100%
}
.contentH
[
data-v-02779db4
]
{
height
:
100px
;
overflow
:
auto
}
.contentH
.mainH
[
data-v-02779db4
]
{
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
height
:
100%
}
.contentH
.mainH
.pull-data
[
data-v-02779db4
]
{
-ms-flex-negative
:
0
;
flex-shrink
:
0
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
;
height
:
90%
;
width
:
120px
;
-webkit-box-pack
:
center
;
-ms-flex-pack
:
center
;
justify-content
:
center
;
padding
:
0
;
margin
:
2px
10px
0
0
;
background
:
white
;
border-radius
:
7px
;
-webkit-box-shadow
:
0px
1px
7px
0px
#edeef1
;
box-shadow
:
0
1px
7px
#edeef1
;
line-height
:
19px
;
font-size
:
13px
;
color
:
#666
}
.content
.main
.pull-data
[
data-v-02779db4
]
{
margin
:
15px
auto
20px
;
padding-left
:
16px
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
;
width
:
100%
;
height
:
46px
;
background
:
white
;
border-radius
:
7px
;
-webkit-box-shadow
:
0px
1px
7px
0px
#edeef1
;
box-shadow
:
0
1px
7px
#edeef1
;
line-height
:
19px
;
font-size
:
13px
;
color
:
#666
}
.content
.main
.pull-data
[
data-v-02779db4
]
:first-child
{
margin-top
:
0
!important
}
.content
.main
.pull-data
[
data-v-02779db4
]
:last-child
{
margin-bottom
:
0
!important
}
@-webkit-keyframes
nutFadeIn-
9b1a0cfa
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-9b1a0cfa
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-9b1a0cfa
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-9b1a0cfa
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-9b1a0cfa
],
.nutFadeIn
[
data-v-9b1a0cfa
],
.nutFade-leave-active
[
data-v-9b1a0cfa
],
.nutFadeOut
[
data-v-9b1a0cfa
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-9b1a0cfa
],
.nutFadeIn
[
data-v-9b1a0cfa
]
{
-webkit-animation-name
:
nutFadeIn-9b1a0cfa
;
animation-name
:
nutFadeIn-9b1a0cfa
}
.nutFade-leave-active
[
data-v-9b1a0cfa
],
.nutFadeOut
[
data-v-9b1a0cfa
]
{
-webkit-animation-name
:
nutFadeOut-9b1a0cfa
;
animation-name
:
nutFadeOut-9b1a0cfa
}
@-webkit-keyframes
nutZoomIn-9b1a0cfa
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-9b1a0cfa
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-9b1a0cfa
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-9b1a0cfa
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-9b1a0cfa
],
.nutZoomIn
[
data-v-9b1a0cfa
],
.nutZoom-leave-active
[
data-v-9b1a0cfa
],
.nutZoomOut
[
data-v-9b1a0cfa
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-9b1a0cfa
],
.nutZoomIn
[
data-v-9b1a0cfa
]
{
-webkit-animation-name
:
nutZoomIn-9b1a0cfa
;
animation-name
:
nutZoomIn-9b1a0cfa
}
.nutZoom-leave-active
[
data-v-9b1a0cfa
],
.nutZoomOut
[
data-v-9b1a0cfa
]
{
-webkit-animation-name
:
nutZoomOut-9b1a0cfa
;
animation-name
:
nutZoomOut-9b1a0cfa
}
@-webkit-keyframes
nutEaseIn-9b1a0cfa
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-9b1a0cfa
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-9b1a0cfa
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-9b1a0cfa
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-9b1a0cfa
],
.nutEaseIn
[
data-v-9b1a0cfa
],
.nutEase-leave-active
[
data-v-9b1a0cfa
],
.nutEaseOut
[
data-v-9b1a0cfa
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-9b1a0cfa
],
.nutEaseIn
[
data-v-9b1a0cfa
]
{
-webkit-animation-name
:
nutEaseIn-9b1a0cfa
;
animation-name
:
nutEaseIn-9b1a0cfa
}
.nutEase-leave-active
[
data-v-9b1a0cfa
],
.nutEaseOut
[
data-v-9b1a0cfa
]
{
-webkit-animation-name
:
nutEaseOut-9b1a0cfa
;
animation-name
:
nutEaseOut-9b1a0cfa
}
@-webkit-keyframes
nutDropIn-9b1a0cfa
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-9b1a0cfa
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-9b1a0cfa
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-9b1a0cfa
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-9b1a0cfa
],
.nutDropIn
[
data-v-9b1a0cfa
],
.nutDrop-leave-active
[
data-v-9b1a0cfa
],
.nutDropOut
[
data-v-9b1a0cfa
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-9b1a0cfa
],
.nutDropIn
[
data-v-9b1a0cfa
]
{
-webkit-animation-name
:
nutDropIn-9b1a0cfa
;
animation-name
:
nutDropIn-9b1a0cfa
}
.nutDrop-leave-active
[
data-v-9b1a0cfa
],
.nutDropOut
[
data-v-9b1a0cfa
]
{
-webkit-animation-name
:
nutDropOut-9b1a0cfa
;
animation-name
:
nutDropOut-9b1a0cfa
}
@-webkit-keyframes
rotation-9b1a0cfa
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-9b1a0cfa
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-9b1a0cfa
],
.nutRotateIn
[
data-v-9b1a0cfa
],
.nutRotate-leave-active
[
data-v-9b1a0cfa
],
.nutRotateOut
[
data-v-9b1a0cfa
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-9b1a0cfa
],
.nutRotateIn
[
data-v-9b1a0cfa
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-9b1a0cfa
],
.nutRotateOut
[
data-v-9b1a0cfa
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.demo__btn
[
data-v-9b1a0cfa
]
{
text-align
:
center
;
width
:
100%
;
height
:
50px
;
border-top
:
1px
solid
#eaf0fb
;
padding-top
:
6px
;
background
:
white
}
.demo__btn
.nut-button
[
data-v-9b1a0cfa
]
{
margin-right
:
10px
}
.demo__piece
[
data-v-9b1a0cfa
]
{
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-box-pack
:
center
;
-ms-flex-pack
:
center
;
justify-content
:
center
;
background
:
white
}
3.1.12/demo2.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
5389677a
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-5389677a
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-5389677a
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-5389677a
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-5389677a
],
.nutFadeIn
[
data-v-5389677a
],
.nutFade-leave-active
[
data-v-5389677a
],
.nutFadeOut
[
data-v-5389677a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-5389677a
],
.nutFadeIn
[
data-v-5389677a
]
{
-webkit-animation-name
:
nutFadeIn-5389677a
;
animation-name
:
nutFadeIn-5389677a
}
.nutFade-leave-active
[
data-v-5389677a
],
.nutFadeOut
[
data-v-5389677a
]
{
-webkit-animation-name
:
nutFadeOut-5389677a
;
animation-name
:
nutFadeOut-5389677a
}
@-webkit-keyframes
nutZoomIn-5389677a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-5389677a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-5389677a
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-5389677a
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-5389677a
],
.nutZoomIn
[
data-v-5389677a
],
.nutZoom-leave-active
[
data-v-5389677a
],
.nutZoomOut
[
data-v-5389677a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-5389677a
],
.nutZoomIn
[
data-v-5389677a
]
{
-webkit-animation-name
:
nutZoomIn-5389677a
;
animation-name
:
nutZoomIn-5389677a
}
.nutZoom-leave-active
[
data-v-5389677a
],
.nutZoomOut
[
data-v-5389677a
]
{
-webkit-animation-name
:
nutZoomOut-5389677a
;
animation-name
:
nutZoomOut-5389677a
}
@-webkit-keyframes
nutEaseIn-5389677a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-5389677a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-5389677a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-5389677a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-5389677a
],
.nutEaseIn
[
data-v-5389677a
],
.nutEase-leave-active
[
data-v-5389677a
],
.nutEaseOut
[
data-v-5389677a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-5389677a
],
.nutEaseIn
[
data-v-5389677a
]
{
-webkit-animation-name
:
nutEaseIn-5389677a
;
animation-name
:
nutEaseIn-5389677a
}
.nutEase-leave-active
[
data-v-5389677a
],
.nutEaseOut
[
data-v-5389677a
]
{
-webkit-animation-name
:
nutEaseOut-5389677a
;
animation-name
:
nutEaseOut-5389677a
}
@-webkit-keyframes
nutDropIn-5389677a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-5389677a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-5389677a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-5389677a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-5389677a
],
.nutDropIn
[
data-v-5389677a
],
.nutDrop-leave-active
[
data-v-5389677a
],
.nutDropOut
[
data-v-5389677a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-5389677a
],
.nutDropIn
[
data-v-5389677a
]
{
-webkit-animation-name
:
nutDropIn-5389677a
;
animation-name
:
nutDropIn-5389677a
}
.nutDrop-leave-active
[
data-v-5389677a
],
.nutDropOut
[
data-v-5389677a
]
{
-webkit-animation-name
:
nutDropOut-5389677a
;
animation-name
:
nutDropOut-5389677a
}
@-webkit-keyframes
rotation-5389677a
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-5389677a
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-5389677a
],
.nutRotateIn
[
data-v-5389677a
],
.nutRotate-leave-active
[
data-v-5389677a
],
.nutRotateOut
[
data-v-5389677a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-5389677a
],
.nutRotateIn
[
data-v-5389677a
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-5389677a
],
.nutRotateOut
[
data-v-5389677a
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.nut-badge
[
data-v-5389677a
]
{
margin-right
:
40px
}
@-webkit-keyframes
nutFadeIn-
fae19b96
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-fae19b96
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-fae19b96
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-fae19b96
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-fae19b96
],
.nutFadeIn
[
data-v-fae19b96
],
.nutFade-leave-active
[
data-v-fae19b96
],
.nutFadeOut
[
data-v-fae19b96
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-fae19b96
],
.nutFadeIn
[
data-v-fae19b96
]
{
-webkit-animation-name
:
nutFadeIn-fae19b96
;
animation-name
:
nutFadeIn-fae19b96
}
.nutFade-leave-active
[
data-v-fae19b96
],
.nutFadeOut
[
data-v-fae19b96
]
{
-webkit-animation-name
:
nutFadeOut-fae19b96
;
animation-name
:
nutFadeOut-fae19b96
}
@-webkit-keyframes
nutZoomIn-fae19b96
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-fae19b96
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-fae19b96
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-fae19b96
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-fae19b96
],
.nutZoomIn
[
data-v-fae19b96
],
.nutZoom-leave-active
[
data-v-fae19b96
],
.nutZoomOut
[
data-v-fae19b96
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-fae19b96
],
.nutZoomIn
[
data-v-fae19b96
]
{
-webkit-animation-name
:
nutZoomIn-fae19b96
;
animation-name
:
nutZoomIn-fae19b96
}
.nutZoom-leave-active
[
data-v-fae19b96
],
.nutZoomOut
[
data-v-fae19b96
]
{
-webkit-animation-name
:
nutZoomOut-fae19b96
;
animation-name
:
nutZoomOut-fae19b96
}
@-webkit-keyframes
nutEaseIn-fae19b96
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-fae19b96
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-fae19b96
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-fae19b96
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-fae19b96
],
.nutEaseIn
[
data-v-fae19b96
],
.nutEase-leave-active
[
data-v-fae19b96
],
.nutEaseOut
[
data-v-fae19b96
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-fae19b96
],
.nutEaseIn
[
data-v-fae19b96
]
{
-webkit-animation-name
:
nutEaseIn-fae19b96
;
animation-name
:
nutEaseIn-fae19b96
}
.nutEase-leave-active
[
data-v-fae19b96
],
.nutEaseOut
[
data-v-fae19b96
]
{
-webkit-animation-name
:
nutEaseOut-fae19b96
;
animation-name
:
nutEaseOut-fae19b96
}
@-webkit-keyframes
nutDropIn-fae19b96
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-fae19b96
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-fae19b96
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-fae19b96
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-fae19b96
],
.nutDropIn
[
data-v-fae19b96
],
.nutDrop-leave-active
[
data-v-fae19b96
],
.nutDropOut
[
data-v-fae19b96
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-fae19b96
],
.nutDropIn
[
data-v-fae19b96
]
{
-webkit-animation-name
:
nutDropIn-fae19b96
;
animation-name
:
nutDropIn-fae19b96
}
.nutDrop-leave-active
[
data-v-fae19b96
],
.nutDropOut
[
data-v-fae19b96
]
{
-webkit-animation-name
:
nutDropOut-fae19b96
;
animation-name
:
nutDropOut-fae19b96
}
@-webkit-keyframes
rotation-fae19b96
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-fae19b96
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-fae19b96
],
.nutRotateIn
[
data-v-fae19b96
],
.nutRotate-leave-active
[
data-v-fae19b96
],
.nutRotateOut
[
data-v-fae19b96
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-fae19b96
],
.nutRotateIn
[
data-v-fae19b96
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-fae19b96
],
.nutRotateOut
[
data-v-fae19b96
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.demo-button-row
[
data-v-fae19b96
]
{
margin-bottom
:
20px
}
.demo-button-row2
[
data-v-fae19b96
]
{
margin-bottom
:
10px
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
;
-ms-flex-wrap
:
wrap
;
flex-wrap
:
wrap
}
.nut-button
[
data-v-fae19b96
]
{
margin-right
:
15px
}
.nut-button
[
data-v-fae19b96
]
:last-child
{
margin-bottom
:
0
;
margin-right
:
0
}
3.1.12/demo20.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-4
8a48510
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-48a48510
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-48a48510
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-48a48510
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-48a48510
],
.nutFadeIn
[
data-v-48a48510
],
.nutFade-leave-active
[
data-v-48a48510
],
.nutFadeOut
[
data-v-48a48510
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-48a48510
],
.nutFadeIn
[
data-v-48a48510
]
{
-webkit-animation-name
:
nutFadeIn-48a48510
;
animation-name
:
nutFadeIn-48a48510
}
.nutFade-leave-active
[
data-v-48a48510
],
.nutFadeOut
[
data-v-48a48510
]
{
-webkit-animation-name
:
nutFadeOut-48a48510
;
animation-name
:
nutFadeOut-48a48510
}
@-webkit-keyframes
nutZoomIn-48a48510
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-48a48510
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-48a48510
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-48a48510
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-48a48510
],
.nutZoomIn
[
data-v-48a48510
],
.nutZoom-leave-active
[
data-v-48a48510
],
.nutZoomOut
[
data-v-48a48510
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-48a48510
],
.nutZoomIn
[
data-v-48a48510
]
{
-webkit-animation-name
:
nutZoomIn-48a48510
;
animation-name
:
nutZoomIn-48a48510
}
.nutZoom-leave-active
[
data-v-48a48510
],
.nutZoomOut
[
data-v-48a48510
]
{
-webkit-animation-name
:
nutZoomOut-48a48510
;
animation-name
:
nutZoomOut-48a48510
}
@-webkit-keyframes
nutEaseIn-48a48510
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-48a48510
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-48a48510
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-48a48510
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-48a48510
],
.nutEaseIn
[
data-v-48a48510
],
.nutEase-leave-active
[
data-v-48a48510
],
.nutEaseOut
[
data-v-48a48510
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-48a48510
],
.nutEaseIn
[
data-v-48a48510
]
{
-webkit-animation-name
:
nutEaseIn-48a48510
;
animation-name
:
nutEaseIn-48a48510
}
.nutEase-leave-active
[
data-v-48a48510
],
.nutEaseOut
[
data-v-48a48510
]
{
-webkit-animation-name
:
nutEaseOut-48a48510
;
animation-name
:
nutEaseOut-48a48510
}
@-webkit-keyframes
nutDropIn-48a48510
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-48a48510
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-48a48510
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-48a48510
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-48a48510
],
.nutDropIn
[
data-v-48a48510
],
.nutDrop-leave-active
[
data-v-48a48510
],
.nutDropOut
[
data-v-48a48510
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-48a48510
],
.nutDropIn
[
data-v-48a48510
]
{
-webkit-animation-name
:
nutDropIn-48a48510
;
animation-name
:
nutDropIn-48a48510
}
.nutDrop-leave-active
[
data-v-48a48510
],
.nutDropOut
[
data-v-48a48510
]
{
-webkit-animation-name
:
nutDropOut-48a48510
;
animation-name
:
nutDropOut-48a48510
}
@-webkit-keyframes
rotation-48a48510
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-48a48510
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-48a48510
],
.nutRotateIn
[
data-v-48a48510
],
.nutRotate-leave-active
[
data-v-48a48510
],
.nutRotateOut
[
data-v-48a48510
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-48a48510
],
.nutRotateIn
[
data-v-48a48510
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-48a48510
],
.nutRotateOut
[
data-v-48a48510
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.cell
[
data-v-48a48510
]
{
padding
:
40px
18px
}
.custom-button
[
data-v-48a48510
]
{
width
:
26px
;
color
:
#fff
;
font-size
:
10px
;
line-height
:
18px
;
text-align
:
center
;
background-color
:
#ee0a24
;
border-radius
:
10
0px
}
@-webkit-keyframes
nutFadeIn-4
50535f2
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-450535f2
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-450535f2
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-450535f2
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-450535f2
],
.nutFadeIn
[
data-v-450535f2
],
.nutFade-leave-active
[
data-v-450535f2
],
.nutFadeOut
[
data-v-450535f2
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-450535f2
],
.nutFadeIn
[
data-v-450535f2
]
{
-webkit-animation-name
:
nutFadeIn-450535f2
;
animation-name
:
nutFadeIn-450535f2
}
.nutFade-leave-active
[
data-v-450535f2
],
.nutFadeOut
[
data-v-450535f2
]
{
-webkit-animation-name
:
nutFadeOut-450535f2
;
animation-name
:
nutFadeOut-450535f2
}
@-webkit-keyframes
nutZoomIn-450535f2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-450535f2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-450535f2
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-450535f2
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-450535f2
],
.nutZoomIn
[
data-v-450535f2
],
.nutZoom-leave-active
[
data-v-450535f2
],
.nutZoomOut
[
data-v-450535f2
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-450535f2
],
.nutZoomIn
[
data-v-450535f2
]
{
-webkit-animation-name
:
nutZoomIn-450535f2
;
animation-name
:
nutZoomIn-450535f2
}
.nutZoom-leave-active
[
data-v-450535f2
],
.nutZoomOut
[
data-v-450535f2
]
{
-webkit-animation-name
:
nutZoomOut-450535f2
;
animation-name
:
nutZoomOut-450535f2
}
@-webkit-keyframes
nutEaseIn-450535f2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-450535f2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-450535f2
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-450535f2
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-450535f2
],
.nutEaseIn
[
data-v-450535f2
],
.nutEase-leave-active
[
data-v-450535f2
],
.nutEaseOut
[
data-v-450535f2
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-450535f2
],
.nutEaseIn
[
data-v-450535f2
]
{
-webkit-animation-name
:
nutEaseIn-450535f2
;
animation-name
:
nutEaseIn-450535f2
}
.nutEase-leave-active
[
data-v-450535f2
],
.nutEaseOut
[
data-v-450535f2
]
{
-webkit-animation-name
:
nutEaseOut-450535f2
;
animation-name
:
nutEaseOut-450535f2
}
@-webkit-keyframes
nutDropIn-450535f2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-450535f2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-450535f2
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-450535f2
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-450535f2
],
.nutDropIn
[
data-v-450535f2
],
.nutDrop-leave-active
[
data-v-450535f2
],
.nutDropOut
[
data-v-450535f2
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-450535f2
],
.nutDropIn
[
data-v-450535f2
]
{
-webkit-animation-name
:
nutDropIn-450535f2
;
animation-name
:
nutDropIn-450535f2
}
.nutDrop-leave-active
[
data-v-450535f2
],
.nutDropOut
[
data-v-450535f2
]
{
-webkit-animation-name
:
nutDropOut-450535f2
;
animation-name
:
nutDropOut-450535f2
}
@-webkit-keyframes
rotation-450535f2
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-450535f2
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-450535f2
],
.nutRotateIn
[
data-v-450535f2
],
.nutRotate-leave-active
[
data-v-450535f2
],
.nutRotateOut
[
data-v-450535f2
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-450535f2
],
.nutRotateIn
[
data-v-450535f2
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-450535f2
],
.nutRotateOut
[
data-v-450535f2
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.nut-button
[
data-v-450535f2
]
{
margin-right
:
1
0px
}
3.1.12/demo21.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
c5e4da9c
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-c5e4da9c
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-c5e4da9c
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-c5e4da9c
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-c5e4da9c
],
.nutFadeIn
[
data-v-c5e4da9c
],
.nutFade-leave-active
[
data-v-c5e4da9c
],
.nutFadeOut
[
data-v-c5e4da9c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-c5e4da9c
],
.nutFadeIn
[
data-v-c5e4da9c
]
{
-webkit-animation-name
:
nutFadeIn-c5e4da9c
;
animation-name
:
nutFadeIn-c5e4da9c
}
.nutFade-leave-active
[
data-v-c5e4da9c
],
.nutFadeOut
[
data-v-c5e4da9c
]
{
-webkit-animation-name
:
nutFadeOut-c5e4da9c
;
animation-name
:
nutFadeOut-c5e4da9c
}
@-webkit-keyframes
nutZoomIn-c5e4da9c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-c5e4da9c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-c5e4da9c
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-c5e4da9c
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-c5e4da9c
],
.nutZoomIn
[
data-v-c5e4da9c
],
.nutZoom-leave-active
[
data-v-c5e4da9c
],
.nutZoomOut
[
data-v-c5e4da9c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-c5e4da9c
],
.nutZoomIn
[
data-v-c5e4da9c
]
{
-webkit-animation-name
:
nutZoomIn-c5e4da9c
;
animation-name
:
nutZoomIn-c5e4da9c
}
.nutZoom-leave-active
[
data-v-c5e4da9c
],
.nutZoomOut
[
data-v-c5e4da9c
]
{
-webkit-animation-name
:
nutZoomOut-c5e4da9c
;
animation-name
:
nutZoomOut-c5e4da9c
}
@-webkit-keyframes
nutEaseIn-c5e4da9c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-c5e4da9c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-c5e4da9c
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-c5e4da9c
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-c5e4da9c
],
.nutEaseIn
[
data-v-c5e4da9c
],
.nutEase-leave-active
[
data-v-c5e4da9c
],
.nutEaseOut
[
data-v-c5e4da9c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-c5e4da9c
],
.nutEaseIn
[
data-v-c5e4da9c
]
{
-webkit-animation-name
:
nutEaseIn-c5e4da9c
;
animation-name
:
nutEaseIn-c5e4da9c
}
.nutEase-leave-active
[
data-v-c5e4da9c
],
.nutEaseOut
[
data-v-c5e4da9c
]
{
-webkit-animation-name
:
nutEaseOut-c5e4da9c
;
animation-name
:
nutEaseOut-c5e4da9c
}
@-webkit-keyframes
nutDropIn-c5e4da9c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-c5e4da9c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-c5e4da9c
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-c5e4da9c
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-c5e4da9c
],
.nutDropIn
[
data-v-c5e4da9c
],
.nutDrop-leave-active
[
data-v-c5e4da9c
],
.nutDropOut
[
data-v-c5e4da9c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-c5e4da9c
],
.nutDropIn
[
data-v-c5e4da9c
]
{
-webkit-animation-name
:
nutDropIn-c5e4da9c
;
animation-name
:
nutDropIn-c5e4da9c
}
.nutDrop-leave-active
[
data-v-c5e4da9c
],
.nutDropOut
[
data-v-c5e4da9c
]
{
-webkit-animation-name
:
nutDropOut-c5e4da9c
;
animation-name
:
nutDropOut-c5e4da9c
}
@-webkit-keyframes
rotation-c5e4da9c
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-c5e4da9c
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-c5e4da9c
],
.nutRotateIn
[
data-v-c5e4da9c
],
.nutRotate-leave-active
[
data-v-c5e4da9c
],
.nutRotateOut
[
data-v-c5e4da9c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-c5e4da9c
],
.nutRotateIn
[
data-v-c5e4da9c
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-c5e4da9c
],
.nutRotateOut
[
data-v-c5e4da9c
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.demo
[
data-v-c5e4da9c
]
{
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
-ms-flex-direction
:
column
;
flex-direction
:
column
}
.demo
.demo-tips
[
data-v-c5e4da9c
]
{
font-size
:
12px
;
color
:
#666
}
@-webkit-keyframes
nutFadeIn-
3325d30e
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-3325d30e
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-3325d30e
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-3325d30e
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-3325d30e
],
.nutFadeIn
[
data-v-3325d30e
],
.nutFade-leave-active
[
data-v-3325d30e
],
.nutFadeOut
[
data-v-3325d30e
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-3325d30e
],
.nutFadeIn
[
data-v-3325d30e
]
{
-webkit-animation-name
:
nutFadeIn-3325d30e
;
animation-name
:
nutFadeIn-3325d30e
}
.nutFade-leave-active
[
data-v-3325d30e
],
.nutFadeOut
[
data-v-3325d30e
]
{
-webkit-animation-name
:
nutFadeOut-3325d30e
;
animation-name
:
nutFadeOut-3325d30e
}
@-webkit-keyframes
nutZoomIn-3325d30e
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-3325d30e
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-3325d30e
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-3325d30e
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-3325d30e
],
.nutZoomIn
[
data-v-3325d30e
],
.nutZoom-leave-active
[
data-v-3325d30e
],
.nutZoomOut
[
data-v-3325d30e
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-3325d30e
],
.nutZoomIn
[
data-v-3325d30e
]
{
-webkit-animation-name
:
nutZoomIn-3325d30e
;
animation-name
:
nutZoomIn-3325d30e
}
.nutZoom-leave-active
[
data-v-3325d30e
],
.nutZoomOut
[
data-v-3325d30e
]
{
-webkit-animation-name
:
nutZoomOut-3325d30e
;
animation-name
:
nutZoomOut-3325d30e
}
@-webkit-keyframes
nutEaseIn-3325d30e
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-3325d30e
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-3325d30e
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-3325d30e
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-3325d30e
],
.nutEaseIn
[
data-v-3325d30e
],
.nutEase-leave-active
[
data-v-3325d30e
],
.nutEaseOut
[
data-v-3325d30e
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-3325d30e
],
.nutEaseIn
[
data-v-3325d30e
]
{
-webkit-animation-name
:
nutEaseIn-3325d30e
;
animation-name
:
nutEaseIn-3325d30e
}
.nutEase-leave-active
[
data-v-3325d30e
],
.nutEaseOut
[
data-v-3325d30e
]
{
-webkit-animation-name
:
nutEaseOut-3325d30e
;
animation-name
:
nutEaseOut-3325d30e
}
@-webkit-keyframes
nutDropIn-3325d30e
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-3325d30e
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-3325d30e
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-3325d30e
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-3325d30e
],
.nutDropIn
[
data-v-3325d30e
],
.nutDrop-leave-active
[
data-v-3325d30e
],
.nutDropOut
[
data-v-3325d30e
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-3325d30e
],
.nutDropIn
[
data-v-3325d30e
]
{
-webkit-animation-name
:
nutDropIn-3325d30e
;
animation-name
:
nutDropIn-3325d30e
}
.nutDrop-leave-active
[
data-v-3325d30e
],
.nutDropOut
[
data-v-3325d30e
]
{
-webkit-animation-name
:
nutDropOut-3325d30e
;
animation-name
:
nutDropOut-3325d30e
}
@-webkit-keyframes
rotation-3325d30e
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-3325d30e
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-3325d30e
],
.nutRotateIn
[
data-v-3325d30e
],
.nutRotate-leave-active
[
data-v-3325d30e
],
.nutRotateOut
[
data-v-3325d30e
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-3325d30e
],
.nutRotateIn
[
data-v-3325d30e
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-3325d30e
],
.nutRotateOut
[
data-v-3325d30e
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.wrapper
[
data-v-3325d30e
]
{
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
height
:
100%
;
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
;
-webkit-box-pack
:
center
;
-ms-flex-pack
:
center
;
justify-content
:
center
}
.wrapper
.content
[
data-v-3325d30e
]
{
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
width
:
150px
;
height
:
150px
;
background
:
#fff
;
border-radius
:
8px
;
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
;
-webkit-box-pack
:
center
;
-ms-flex-pack
:
center
;
justify-content
:
center
;
color
:
red
}
3.1.12/demo22.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn
-99b05c9e
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-99b05c9e
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-99b05c9e
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-99b05c9e
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-99b05c9e
],
.nutFadeIn
[
data-v-99b05c9e
],
.nutFade-leave-active
[
data-v-99b05c9e
],
.nutFadeOut
[
data-v-99b05c9e
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-99b05c9e
],
.nutFadeIn
[
data-v-99b05c9e
]
{
-webkit-animation-name
:
nutFadeIn-99b05c9e
;
animation-name
:
nutFadeIn-99b05c9e
}
.nutFade-leave-active
[
data-v-99b05c9e
],
.nutFadeOut
[
data-v-99b05c9e
]
{
-webkit-animation-name
:
nutFadeOut-99b05c9e
;
animation-name
:
nutFadeOut-99b05c9e
}
@-webkit-keyframes
nutZoomIn-99b05c9e
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-99b05c9e
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-99b05c9e
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-99b05c9e
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-99b05c9e
],
.nutZoomIn
[
data-v-99b05c9e
],
.nutZoom-leave-active
[
data-v-99b05c9e
],
.nutZoomOut
[
data-v-99b05c9e
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-99b05c9e
],
.nutZoomIn
[
data-v-99b05c9e
]
{
-webkit-animation-name
:
nutZoomIn-99b05c9e
;
animation-name
:
nutZoomIn-99b05c9e
}
.nutZoom-leave-active
[
data-v-99b05c9e
],
.nutZoomOut
[
data-v-99b05c9e
]
{
-webkit-animation-name
:
nutZoomOut-99b05c9e
;
animation-name
:
nutZoomOut-99b05c9e
}
@-webkit-keyframes
nutEaseIn-99b05c9e
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-99b05c9e
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-99b05c9e
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-99b05c9e
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-99b05c9e
],
.nutEaseIn
[
data-v-99b05c9e
],
.nutEase-leave-active
[
data-v-99b05c9e
],
.nutEaseOut
[
data-v-99b05c9e
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-99b05c9e
],
.nutEaseIn
[
data-v-99b05c9e
]
{
-webkit-animation-name
:
nutEaseIn-99b05c9e
;
animation-name
:
nutEaseIn-99b05c9e
}
.nutEase-leave-active
[
data-v-99b05c9e
],
.nutEaseOut
[
data-v-99b05c9e
]
{
-webkit-animation-name
:
nutEaseOut-99b05c9e
;
animation-name
:
nutEaseOut-99b05c9e
}
@-webkit-keyframes
nutDropIn-99b05c9e
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-99b05c9e
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-99b05c9e
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-99b05c9e
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-99b05c9e
],
.nutDropIn
[
data-v-99b05c9e
],
.nutDrop-leave-active
[
data-v-99b05c9e
],
.nutDropOut
[
data-v-99b05c9e
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-99b05c9e
],
.nutDropIn
[
data-v-99b05c9e
]
{
-webkit-animation-name
:
nutDropIn-99b05c9e
;
animation-name
:
nutDropIn-99b05c9e
}
.nutDrop-leave-active
[
data-v-99b05c9e
],
.nutDropOut
[
data-v-99b05c9e
]
{
-webkit-animation-name
:
nutDropOut-99b05c9e
;
animation-name
:
nutDropOut-99b05c9e
}
@-webkit-keyframes
rotation-99b05c9e
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-99b05c9e
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-99b05c9e
],
.nutRotateIn
[
data-v-99b05c9e
],
.nutRotate-leave-active
[
data-v-99b05c9e
],
.nutRotateOut
[
data-v-99b05c9e
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-99b05c9e
],
.nutRotateIn
[
data-v-99b05c9e
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-99b05c9e
],
.nutRotateOut
[
data-v-99b05c9e
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.tag
[
data-v-99b05c9e
]
{
display
:
inline-block
;
width
:
50px
;
height
:
15px
;
font-size
:
12px
;
margin-left
:
10px
;
background
:
url(//storage.360buyimg.com/imgtools/bbdf6c9a2a-e3f6fbc0-fb4d-11eb-a27f-676da10c85f4.png)
no-repeat
center
center
;
background-size
:
100%
100%
}
.sku-operate-box
[
data-v-99b05c9e
]
{
width
:
100%
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
padding
:
8px
10px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
}
.sku-operate-box
.sku-operate-item
[
data-v-99b05c9e
]
{
width
:
100%
;
-ms-flex-negative
:
1
;
flex-shrink
:
1
}
.sku-operate-box
.sku-operate-item
[
data-v-99b05c9e
]
:first-child
{
border-top-left-radius
:
20px
;
border-bottom-left-radius
:
20px
}
.sku-operate-box
.sku-operate-item
[
data-v-99b05c9e
]
:last-child
{
border-top-right-radius
:
20px
;
border-bottom-right-radius
:
20px
}
.sku-operate-box
.sku-operate-box-dis
[
data-v-99b05c9e
]
{
width
:
100%
;
-ms-flex-negative
:
1
;
flex-shrink
:
1
}
.sku-operate-box
.sku-operate-box-dis
[
data-v-99b05c9e
]
:first-child
{
margin-right
:
18px
}
@-webkit-keyframes
nutFadeIn
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
,
.nutFadeIn
,
.nutFade-leave-active
,
.nutFadeOut
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
,
.nutFadeIn
{
-webkit-animation-name
:
nutFadeIn
;
animation-name
:
nutFadeIn
}
.nutFade-leave-active
,
.nutFadeOut
{
-webkit-animation-name
:
nutFadeOut
;
animation-name
:
nutFadeOut
}
@-webkit-keyframes
nutZoomIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
,
.nutZoomIn
,
.nutZoom-leave-active
,
.nutZoomOut
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
,
.nutZoomIn
{
-webkit-animation-name
:
nutZoomIn
;
animation-name
:
nutZoomIn
}
.nutZoom-leave-active
,
.nutZoomOut
{
-webkit-animation-name
:
nutZoomOut
;
animation-name
:
nutZoomOut
}
@-webkit-keyframes
nutEaseIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
,
.nutEaseIn
,
.nutEase-leave-active
,
.nutEaseOut
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
,
.nutEaseIn
{
-webkit-animation-name
:
nutEaseIn
;
animation-name
:
nutEaseIn
}
.nutEase-leave-active
,
.nutEaseOut
{
-webkit-animation-name
:
nutEaseOut
;
animation-name
:
nutEaseOut
}
@-webkit-keyframes
nutDropIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
,
.nutDropIn
,
.nutDrop-leave-active
,
.nutDropOut
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
,
.nutDropIn
{
-webkit-animation-name
:
nutDropIn
;
animation-name
:
nutDropIn
}
.nutDrop-leave-active
,
.nutDropOut
{
-webkit-animation-name
:
nutDropOut
;
animation-name
:
nutDropOut
}
@-webkit-keyframes
rotation
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
,
.nutRotateIn
,
.nutRotate-leave-active
,
.nutRotateOut
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
,
.nutRotateIn
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
,
.nutRotateOut
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.self-content
{
width
:
195px
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-ms-flex-wrap
:
wrap
;
flex-wrap
:
wrap
}
.self-content-item
{
margin-top
:
10px
;
margin-bottom
:
10px
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-box-pack
:
center
;
-ms-flex-pack
:
center
;
justify-content
:
center
;
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
;
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
-ms-flex-direction
:
column
;
flex-direction
:
column
}
.self-content-desc
{
margin-top
:
5px
;
width
:
60px
;
font-size
:
10px
;
text-align
:
center
}
3.1.12/demo23.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
,
.nutFadeIn
,
.nutFade-leave-active
,
.nutFadeOut
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
,
.nutFadeIn
{
-webkit-animation-name
:
nutFadeIn
;
animation-name
:
nutFadeIn
}
.nutFade-leave-active
,
.nutFadeOut
{
-webkit-animation-name
:
nutFadeOut
;
animation-name
:
nutFadeOut
}
@-webkit-keyframes
nutZoomIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
,
.nutZoomIn
,
.nutZoom-leave-active
,
.nutZoomOut
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
,
.nutZoomIn
{
-webkit-animation-name
:
nutZoomIn
;
animation-name
:
nutZoomIn
}
.nutZoom-leave-active
,
.nutZoomOut
{
-webkit-animation-name
:
nutZoomOut
;
animation-name
:
nutZoomOut
}
@-webkit-keyframes
nutEaseIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
,
.nutEaseIn
,
.nutEase-leave-active
,
.nutEaseOut
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
,
.nutEaseIn
{
-webkit-animation-name
:
nutEaseIn
;
animation-name
:
nutEaseIn
}
.nutEase-leave-active
,
.nutEaseOut
{
-webkit-animation-name
:
nutEaseOut
;
animation-name
:
nutEaseOut
}
@-webkit-keyframes
nutDropIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
,
.nutDropIn
,
.nutDrop-leave-active
,
.nutDropOut
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
,
.nutDropIn
{
-webkit-animation-name
:
nutDropIn
;
animation-name
:
nutDropIn
}
.nutDrop-leave-active
,
.nutDropOut
{
-webkit-animation-name
:
nutDropOut
;
animation-name
:
nutDropOut
}
@-webkit-keyframes
rotation
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
,
.nutRotateIn
,
.nutRotate-leave-active
,
.nutRotateOut
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
,
.nutRotateIn
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
,
.nutRotateOut
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.padding
{
padding-left
:
0
!important
;
padding-right
:
0
!important
}
.padding
h2
{
padding-left
:
27px
!important
}
.steps-wrapper
{
width
:
100%
;
padding
:
15px
0
;
background-color
:
#fff
}
.steps-wrapper
.steps-button
{
text-align
:
center
}
@-webkit-keyframes
nutFadeIn
-1957d0eb
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-1957d0eb
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-1957d0eb
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-1957d0eb
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-1957d0eb
],
.nutFadeIn
[
data-v-1957d0eb
],
.nutFade-leave-active
[
data-v-1957d0eb
],
.nutFadeOut
[
data-v-1957d0eb
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-1957d0eb
],
.nutFadeIn
[
data-v-1957d0eb
]
{
-webkit-animation-name
:
nutFadeIn-1957d0eb
;
animation-name
:
nutFadeIn-1957d0eb
}
.nutFade-leave-active
[
data-v-1957d0eb
],
.nutFadeOut
[
data-v-1957d0eb
]
{
-webkit-animation-name
:
nutFadeOut-1957d0eb
;
animation-name
:
nutFadeOut-1957d0eb
}
@-webkit-keyframes
nutZoomIn-1957d0eb
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-1957d0eb
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-1957d0eb
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-1957d0eb
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-1957d0eb
],
.nutZoomIn
[
data-v-1957d0eb
],
.nutZoom-leave-active
[
data-v-1957d0eb
],
.nutZoomOut
[
data-v-1957d0eb
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-1957d0eb
],
.nutZoomIn
[
data-v-1957d0eb
]
{
-webkit-animation-name
:
nutZoomIn-1957d0eb
;
animation-name
:
nutZoomIn-1957d0eb
}
.nutZoom-leave-active
[
data-v-1957d0eb
],
.nutZoomOut
[
data-v-1957d0eb
]
{
-webkit-animation-name
:
nutZoomOut-1957d0eb
;
animation-name
:
nutZoomOut-1957d0eb
}
@-webkit-keyframes
nutEaseIn-1957d0eb
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-1957d0eb
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-1957d0eb
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-1957d0eb
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-1957d0eb
],
.nutEaseIn
[
data-v-1957d0eb
],
.nutEase-leave-active
[
data-v-1957d0eb
],
.nutEaseOut
[
data-v-1957d0eb
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-1957d0eb
],
.nutEaseIn
[
data-v-1957d0eb
]
{
-webkit-animation-name
:
nutEaseIn-1957d0eb
;
animation-name
:
nutEaseIn-1957d0eb
}
.nutEase-leave-active
[
data-v-1957d0eb
],
.nutEaseOut
[
data-v-1957d0eb
]
{
-webkit-animation-name
:
nutEaseOut-1957d0eb
;
animation-name
:
nutEaseOut-1957d0eb
}
@-webkit-keyframes
nutDropIn-1957d0eb
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-1957d0eb
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-1957d0eb
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-1957d0eb
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-1957d0eb
],
.nutDropIn
[
data-v-1957d0eb
],
.nutDrop-leave-active
[
data-v-1957d0eb
],
.nutDropOut
[
data-v-1957d0eb
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-1957d0eb
],
.nutDropIn
[
data-v-1957d0eb
]
{
-webkit-animation-name
:
nutDropIn-1957d0eb
;
animation-name
:
nutDropIn-1957d0eb
}
.nutDrop-leave-active
[
data-v-1957d0eb
],
.nutDropOut
[
data-v-1957d0eb
]
{
-webkit-animation-name
:
nutDropOut-1957d0eb
;
animation-name
:
nutDropOut-1957d0eb
}
@-webkit-keyframes
rotation-1957d0eb
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-1957d0eb
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-1957d0eb
],
.nutRotateIn
[
data-v-1957d0eb
],
.nutRotate-leave-active
[
data-v-1957d0eb
],
.nutRotateOut
[
data-v-1957d0eb
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-1957d0eb
],
.nutRotateIn
[
data-v-1957d0eb
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-1957d0eb
],
.nutRotateOut
[
data-v-1957d0eb
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.nut-button
[
data-v-1957d0eb
]
{
margin-right
:
10px
}
3.1.12/demo24.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
1faf7bac
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-1faf7bac
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-1faf7bac
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-1faf7bac
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-1faf7bac
],
.nutFadeIn
[
data-v-1faf7bac
],
.nutFade-leave-active
[
data-v-1faf7bac
],
.nutFadeOut
[
data-v-1faf7bac
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-1faf7bac
],
.nutFadeIn
[
data-v-1faf7bac
]
{
-webkit-animation-name
:
nutFadeIn-1faf7bac
;
animation-name
:
nutFadeIn-1faf7bac
}
.nutFade-leave-active
[
data-v-1faf7bac
],
.nutFadeOut
[
data-v-1faf7bac
]
{
-webkit-animation-name
:
nutFadeOut-1faf7bac
;
animation-name
:
nutFadeOut-1faf7bac
}
@-webkit-keyframes
nutZoomIn-1faf7bac
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-1faf7bac
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-1faf7bac
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-1faf7bac
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-1faf7bac
],
.nutZoomIn
[
data-v-1faf7bac
],
.nutZoom-leave-active
[
data-v-1faf7bac
],
.nutZoomOut
[
data-v-1faf7bac
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-1faf7bac
],
.nutZoomIn
[
data-v-1faf7bac
]
{
-webkit-animation-name
:
nutZoomIn-1faf7bac
;
animation-name
:
nutZoomIn-1faf7bac
}
.nutZoom-leave-active
[
data-v-1faf7bac
],
.nutZoomOut
[
data-v-1faf7bac
]
{
-webkit-animation-name
:
nutZoomOut-1faf7bac
;
animation-name
:
nutZoomOut-1faf7bac
}
@-webkit-keyframes
nutEaseIn-1faf7bac
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-1faf7bac
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-1faf7bac
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-1faf7bac
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-1faf7bac
],
.nutEaseIn
[
data-v-1faf7bac
],
.nutEase-leave-active
[
data-v-1faf7bac
],
.nutEaseOut
[
data-v-1faf7bac
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-1faf7bac
],
.nutEaseIn
[
data-v-1faf7bac
]
{
-webkit-animation-name
:
nutEaseIn-1faf7bac
;
animation-name
:
nutEaseIn-1faf7bac
}
.nutEase-leave-active
[
data-v-1faf7bac
],
.nutEaseOut
[
data-v-1faf7bac
]
{
-webkit-animation-name
:
nutEaseOut-1faf7bac
;
animation-name
:
nutEaseOut-1faf7bac
}
@-webkit-keyframes
nutDropIn-1faf7bac
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-1faf7bac
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-1faf7bac
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-1faf7bac
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-1faf7bac
],
.nutDropIn
[
data-v-1faf7bac
],
.nutDrop-leave-active
[
data-v-1faf7bac
],
.nutDropOut
[
data-v-1faf7bac
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-1faf7bac
],
.nutDropIn
[
data-v-1faf7bac
]
{
-webkit-animation-name
:
nutDropIn-1faf7bac
;
animation-name
:
nutDropIn-1faf7bac
}
.nutDrop-leave-active
[
data-v-1faf7bac
],
.nutDropOut
[
data-v-1faf7bac
]
{
-webkit-animation-name
:
nutDropOut-1faf7bac
;
animation-name
:
nutDropOut-1faf7bac
}
@-webkit-keyframes
rotation-1faf7bac
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-1faf7bac
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-1faf7bac
],
.nutRotateIn
[
data-v-1faf7bac
],
.nutRotate-leave-active
[
data-v-1faf7bac
],
.nutRotateOut
[
data-v-1faf7bac
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-1faf7bac
],
.nutRotateIn
[
data-v-1faf7bac
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-1faf7bac
],
.nutRotateOut
[
data-v-1faf7bac
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOu
t
}
@-webkit-keyframes
nutFadeIn-
02779db4
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-02779db4
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-02779db4
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-02779db4
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-02779db4
],
.nutFadeIn
[
data-v-02779db4
],
.nutFade-leave-active
[
data-v-02779db4
],
.nutFadeOut
[
data-v-02779db4
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-02779db4
],
.nutFadeIn
[
data-v-02779db4
]
{
-webkit-animation-name
:
nutFadeIn-02779db4
;
animation-name
:
nutFadeIn-02779db4
}
.nutFade-leave-active
[
data-v-02779db4
],
.nutFadeOut
[
data-v-02779db4
]
{
-webkit-animation-name
:
nutFadeOut-02779db4
;
animation-name
:
nutFadeOut-02779db4
}
@-webkit-keyframes
nutZoomIn-02779db4
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-02779db4
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-02779db4
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-02779db4
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-02779db4
],
.nutZoomIn
[
data-v-02779db4
],
.nutZoom-leave-active
[
data-v-02779db4
],
.nutZoomOut
[
data-v-02779db4
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-02779db4
],
.nutZoomIn
[
data-v-02779db4
]
{
-webkit-animation-name
:
nutZoomIn-02779db4
;
animation-name
:
nutZoomIn-02779db4
}
.nutZoom-leave-active
[
data-v-02779db4
],
.nutZoomOut
[
data-v-02779db4
]
{
-webkit-animation-name
:
nutZoomOut-02779db4
;
animation-name
:
nutZoomOut-02779db4
}
@-webkit-keyframes
nutEaseIn-02779db4
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-02779db4
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-02779db4
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-02779db4
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-02779db4
],
.nutEaseIn
[
data-v-02779db4
],
.nutEase-leave-active
[
data-v-02779db4
],
.nutEaseOut
[
data-v-02779db4
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-02779db4
],
.nutEaseIn
[
data-v-02779db4
]
{
-webkit-animation-name
:
nutEaseIn-02779db4
;
animation-name
:
nutEaseIn-02779db4
}
.nutEase-leave-active
[
data-v-02779db4
],
.nutEaseOut
[
data-v-02779db4
]
{
-webkit-animation-name
:
nutEaseOut-02779db4
;
animation-name
:
nutEaseOut-02779db4
}
@-webkit-keyframes
nutDropIn-02779db4
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-02779db4
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-02779db4
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-02779db4
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-02779db4
],
.nutDropIn
[
data-v-02779db4
],
.nutDrop-leave-active
[
data-v-02779db4
],
.nutDropOut
[
data-v-02779db4
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-02779db4
],
.nutDropIn
[
data-v-02779db4
]
{
-webkit-animation-name
:
nutDropIn-02779db4
;
animation-name
:
nutDropIn-02779db4
}
.nutDrop-leave-active
[
data-v-02779db4
],
.nutDropOut
[
data-v-02779db4
]
{
-webkit-animation-name
:
nutDropOut-02779db4
;
animation-name
:
nutDropOut-02779db4
}
@-webkit-keyframes
rotation-02779db4
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-02779db4
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-02779db4
],
.nutRotateIn
[
data-v-02779db4
],
.nutRotate-leave-active
[
data-v-02779db4
],
.nutRotateOut
[
data-v-02779db4
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-02779db4
],
.nutRotateIn
[
data-v-02779db4
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-02779db4
],
.nutRotateOut
[
data-v-02779db4
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.vertical
[
data-v-02779db4
]
{
height
:
300px
;
overflow
:
hidden
;
width
:
100%
}
.content
[
data-v-02779db4
]
{
height
:
100%
;
overflow
:
auto
}
.horizontal
[
data-v-02779db4
]
{
width
:
100%
}
.contentH
[
data-v-02779db4
]
{
height
:
100px
;
overflow
:
auto
}
.contentH
.mainH
[
data-v-02779db4
]
{
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
height
:
100%
}
.contentH
.mainH
.pull-data
[
data-v-02779db4
]
{
-ms-flex-negative
:
0
;
flex-shrink
:
0
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
;
height
:
90%
;
width
:
120px
;
-webkit-box-pack
:
center
;
-ms-flex-pack
:
center
;
justify-content
:
center
;
padding
:
0
;
margin
:
2px
10px
0
0
;
background
:
white
;
border-radius
:
7px
;
-webkit-box-shadow
:
0px
1px
7px
0px
#edeef1
;
box-shadow
:
0
1px
7px
#edeef1
;
line-height
:
19px
;
font-size
:
13px
;
color
:
#666
}
.content
.main
.pull-data
[
data-v-02779db4
]
{
margin
:
15px
auto
20px
;
padding-left
:
16px
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
;
width
:
100%
;
height
:
46px
;
background
:
white
;
border-radius
:
7px
;
-webkit-box-shadow
:
0px
1px
7px
0px
#edeef1
;
box-shadow
:
0
1px
7px
#edeef1
;
line-height
:
19px
;
font-size
:
13px
;
color
:
#666
}
.content
.main
.pull-data
[
data-v-02779db4
]
:first-child
{
margin-top
:
0
!important
}
.content
.main
.pull-data
[
data-v-02779db4
]
:last-child
{
margin-bottom
:
0
!importan
t
}
3.1.12/demo25.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
0e5856ef
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-0e5856ef
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-0e5856ef
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-0e5856ef
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-0e5856ef
],
.nutFadeIn
[
data-v-0e5856ef
],
.nutFade-leave-active
[
data-v-0e5856ef
],
.nutFadeOut
[
data-v-0e5856ef
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-0e5856ef
],
.nutFadeIn
[
data-v-0e5856ef
]
{
-webkit-animation-name
:
nutFadeIn-0e5856ef
;
animation-name
:
nutFadeIn-0e5856ef
}
.nutFade-leave-active
[
data-v-0e5856ef
],
.nutFadeOut
[
data-v-0e5856ef
]
{
-webkit-animation-name
:
nutFadeOut-0e5856ef
;
animation-name
:
nutFadeOut-0e5856ef
}
@-webkit-keyframes
nutZoomIn-0e5856ef
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-0e5856ef
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-0e5856ef
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-0e5856ef
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-0e5856ef
],
.nutZoomIn
[
data-v-0e5856ef
],
.nutZoom-leave-active
[
data-v-0e5856ef
],
.nutZoomOut
[
data-v-0e5856ef
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-0e5856ef
],
.nutZoomIn
[
data-v-0e5856ef
]
{
-webkit-animation-name
:
nutZoomIn-0e5856ef
;
animation-name
:
nutZoomIn-0e5856ef
}
.nutZoom-leave-active
[
data-v-0e5856ef
],
.nutZoomOut
[
data-v-0e5856ef
]
{
-webkit-animation-name
:
nutZoomOut-0e5856ef
;
animation-name
:
nutZoomOut-0e5856ef
}
@-webkit-keyframes
nutEaseIn-0e5856ef
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-0e5856ef
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-0e5856ef
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-0e5856ef
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-0e5856ef
],
.nutEaseIn
[
data-v-0e5856ef
],
.nutEase-leave-active
[
data-v-0e5856ef
],
.nutEaseOut
[
data-v-0e5856ef
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-0e5856ef
],
.nutEaseIn
[
data-v-0e5856ef
]
{
-webkit-animation-name
:
nutEaseIn-0e5856ef
;
animation-name
:
nutEaseIn-0e5856ef
}
.nutEase-leave-active
[
data-v-0e5856ef
],
.nutEaseOut
[
data-v-0e5856ef
]
{
-webkit-animation-name
:
nutEaseOut-0e5856ef
;
animation-name
:
nutEaseOut-0e5856ef
}
@-webkit-keyframes
nutDropIn-0e5856ef
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-0e5856ef
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-0e5856ef
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-0e5856ef
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-0e5856ef
],
.nutDropIn
[
data-v-0e5856ef
],
.nutDrop-leave-active
[
data-v-0e5856ef
],
.nutDropOut
[
data-v-0e5856ef
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-0e5856ef
],
.nutDropIn
[
data-v-0e5856ef
]
{
-webkit-animation-name
:
nutDropIn-0e5856ef
;
animation-name
:
nutDropIn-0e5856ef
}
.nutDrop-leave-active
[
data-v-0e5856ef
],
.nutDropOut
[
data-v-0e5856ef
]
{
-webkit-animation-name
:
nutDropOut-0e5856ef
;
animation-name
:
nutDropOut-0e5856ef
}
@-webkit-keyframes
rotation-0e5856ef
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-0e5856ef
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-0e5856ef
],
.nutRotateIn
[
data-v-0e5856ef
],
.nutRotate-leave-active
[
data-v-0e5856ef
],
.nutRotateOut
[
data-v-0e5856ef
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-0e5856ef
],
.nutRotateIn
[
data-v-0e5856ef
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-0e5856ef
],
.nutRotateOut
[
data-v-0e5856ef
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
@-webkit-keyframes
nutFadeIn-
48a48510
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-48a48510
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-48a48510
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-48a48510
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-48a48510
],
.nutFadeIn
[
data-v-48a48510
],
.nutFade-leave-active
[
data-v-48a48510
],
.nutFadeOut
[
data-v-48a48510
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-48a48510
],
.nutFadeIn
[
data-v-48a48510
]
{
-webkit-animation-name
:
nutFadeIn-48a48510
;
animation-name
:
nutFadeIn-48a48510
}
.nutFade-leave-active
[
data-v-48a48510
],
.nutFadeOut
[
data-v-48a48510
]
{
-webkit-animation-name
:
nutFadeOut-48a48510
;
animation-name
:
nutFadeOut-48a48510
}
@-webkit-keyframes
nutZoomIn-48a48510
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-48a48510
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-48a48510
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-48a48510
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-48a48510
],
.nutZoomIn
[
data-v-48a48510
],
.nutZoom-leave-active
[
data-v-48a48510
],
.nutZoomOut
[
data-v-48a48510
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-48a48510
],
.nutZoomIn
[
data-v-48a48510
]
{
-webkit-animation-name
:
nutZoomIn-48a48510
;
animation-name
:
nutZoomIn-48a48510
}
.nutZoom-leave-active
[
data-v-48a48510
],
.nutZoomOut
[
data-v-48a48510
]
{
-webkit-animation-name
:
nutZoomOut-48a48510
;
animation-name
:
nutZoomOut-48a48510
}
@-webkit-keyframes
nutEaseIn-48a48510
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-48a48510
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-48a48510
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-48a48510
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-48a48510
],
.nutEaseIn
[
data-v-48a48510
],
.nutEase-leave-active
[
data-v-48a48510
],
.nutEaseOut
[
data-v-48a48510
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-48a48510
],
.nutEaseIn
[
data-v-48a48510
]
{
-webkit-animation-name
:
nutEaseIn-48a48510
;
animation-name
:
nutEaseIn-48a48510
}
.nutEase-leave-active
[
data-v-48a48510
],
.nutEaseOut
[
data-v-48a48510
]
{
-webkit-animation-name
:
nutEaseOut-48a48510
;
animation-name
:
nutEaseOut-48a48510
}
@-webkit-keyframes
nutDropIn-48a48510
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-48a48510
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-48a48510
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-48a48510
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-48a48510
],
.nutDropIn
[
data-v-48a48510
],
.nutDrop-leave-active
[
data-v-48a48510
],
.nutDropOut
[
data-v-48a48510
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-48a48510
],
.nutDropIn
[
data-v-48a48510
]
{
-webkit-animation-name
:
nutDropIn-48a48510
;
animation-name
:
nutDropIn-48a48510
}
.nutDrop-leave-active
[
data-v-48a48510
],
.nutDropOut
[
data-v-48a48510
]
{
-webkit-animation-name
:
nutDropOut-48a48510
;
animation-name
:
nutDropOut-48a48510
}
@-webkit-keyframes
rotation-48a48510
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-48a48510
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-48a48510
],
.nutRotateIn
[
data-v-48a48510
],
.nutRotate-leave-active
[
data-v-48a48510
],
.nutRotateOut
[
data-v-48a48510
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-48a48510
],
.nutRotateIn
[
data-v-48a48510
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-48a48510
],
.nutRotateOut
[
data-v-48a48510
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.cell
[
data-v-48a48510
]
{
padding
:
40px
18px
}
.custom-button
[
data-v-48a48510
]
{
width
:
26px
;
color
:
#fff
;
font-size
:
10px
;
line-height
:
18px
;
text-align
:
center
;
background-color
:
#ee0a24
;
border-radius
:
100px
}
3.1.12/demo26.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
1a1fa3ea
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-1a1fa3ea
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-1a1fa3ea
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-1a1fa3ea
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-1a1fa3ea
],
.nutFadeIn
[
data-v-1a1fa3ea
],
.nutFade-leave-active
[
data-v-1a1fa3ea
],
.nutFadeOut
[
data-v-1a1fa3ea
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-1a1fa3ea
],
.nutFadeIn
[
data-v-1a1fa3ea
]
{
-webkit-animation-name
:
nutFadeIn-1a1fa3ea
;
animation-name
:
nutFadeIn-1a1fa3ea
}
.nutFade-leave-active
[
data-v-1a1fa3ea
],
.nutFadeOut
[
data-v-1a1fa3ea
]
{
-webkit-animation-name
:
nutFadeOut-1a1fa3ea
;
animation-name
:
nutFadeOut-1a1fa3ea
}
@-webkit-keyframes
nutZoomIn-1a1fa3ea
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-1a1fa3ea
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-1a1fa3ea
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-1a1fa3ea
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-1a1fa3ea
],
.nutZoomIn
[
data-v-1a1fa3ea
],
.nutZoom-leave-active
[
data-v-1a1fa3ea
],
.nutZoomOut
[
data-v-1a1fa3ea
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-1a1fa3ea
],
.nutZoomIn
[
data-v-1a1fa3ea
]
{
-webkit-animation-name
:
nutZoomIn-1a1fa3ea
;
animation-name
:
nutZoomIn-1a1fa3ea
}
.nutZoom-leave-active
[
data-v-1a1fa3ea
],
.nutZoomOut
[
data-v-1a1fa3ea
]
{
-webkit-animation-name
:
nutZoomOut-1a1fa3ea
;
animation-name
:
nutZoomOut-1a1fa3ea
}
@-webkit-keyframes
nutEaseIn-1a1fa3ea
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-1a1fa3ea
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-1a1fa3ea
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-1a1fa3ea
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-1a1fa3ea
],
.nutEaseIn
[
data-v-1a1fa3ea
],
.nutEase-leave-active
[
data-v-1a1fa3ea
],
.nutEaseOut
[
data-v-1a1fa3ea
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-1a1fa3ea
],
.nutEaseIn
[
data-v-1a1fa3ea
]
{
-webkit-animation-name
:
nutEaseIn-1a1fa3ea
;
animation-name
:
nutEaseIn-1a1fa3ea
}
.nutEase-leave-active
[
data-v-1a1fa3ea
],
.nutEaseOut
[
data-v-1a1fa3ea
]
{
-webkit-animation-name
:
nutEaseOut-1a1fa3ea
;
animation-name
:
nutEaseOut-1a1fa3ea
}
@-webkit-keyframes
nutDropIn-1a1fa3ea
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-1a1fa3ea
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-1a1fa3ea
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-1a1fa3ea
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-1a1fa3ea
],
.nutDropIn
[
data-v-1a1fa3ea
],
.nutDrop-leave-active
[
data-v-1a1fa3ea
],
.nutDropOut
[
data-v-1a1fa3ea
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-1a1fa3ea
],
.nutDropIn
[
data-v-1a1fa3ea
]
{
-webkit-animation-name
:
nutDropIn-1a1fa3ea
;
animation-name
:
nutDropIn-1a1fa3ea
}
.nutDrop-leave-active
[
data-v-1a1fa3ea
],
.nutDropOut
[
data-v-1a1fa3ea
]
{
-webkit-animation-name
:
nutDropOut-1a1fa3ea
;
animation-name
:
nutDropOut-1a1fa3ea
}
@-webkit-keyframes
rotation-1a1fa3ea
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-1a1fa3ea
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-1a1fa3ea
],
.nutRotateIn
[
data-v-1a1fa3ea
],
.nutRotate-leave-active
[
data-v-1a1fa3ea
],
.nutRotateOut
[
data-v-1a1fa3ea
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-1a1fa3ea
],
.nutRotateIn
[
data-v-1a1fa3ea
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-1a1fa3ea
],
.nutRotateOut
[
data-v-1a1fa3ea
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.demo
[
data-v-1a1fa3ea
]
{
padding
:
57px
0
0
!important
}
h4
[
data-v-1a1fa3ea
]
{
margin-left
:
25px
;
margin-top
:
20px
;
font-family
:
PingFangSC-Regular
;
font-size
:
14px
;
color
:
#909ca4
}
.nut-cell
[
data-v-1a1fa3ea
]
{
padding
:
0
}
.nut-cell
[
data-v-1a1fa3ea
]
:after
{
display
:
none
}
.m-b
[
data-v-1a1fa3ea
]
{
margin-bottom
:
60px
}
@-webkit-keyframes
nutFadeIn-
c5e4da9c
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-c5e4da9c
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-c5e4da9c
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-c5e4da9c
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-c5e4da9c
],
.nutFadeIn
[
data-v-c5e4da9c
],
.nutFade-leave-active
[
data-v-c5e4da9c
],
.nutFadeOut
[
data-v-c5e4da9c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-c5e4da9c
],
.nutFadeIn
[
data-v-c5e4da9c
]
{
-webkit-animation-name
:
nutFadeIn-c5e4da9c
;
animation-name
:
nutFadeIn-c5e4da9c
}
.nutFade-leave-active
[
data-v-c5e4da9c
],
.nutFadeOut
[
data-v-c5e4da9c
]
{
-webkit-animation-name
:
nutFadeOut-c5e4da9c
;
animation-name
:
nutFadeOut-c5e4da9c
}
@-webkit-keyframes
nutZoomIn-c5e4da9c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-c5e4da9c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-c5e4da9c
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-c5e4da9c
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-c5e4da9c
],
.nutZoomIn
[
data-v-c5e4da9c
],
.nutZoom-leave-active
[
data-v-c5e4da9c
],
.nutZoomOut
[
data-v-c5e4da9c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-c5e4da9c
],
.nutZoomIn
[
data-v-c5e4da9c
]
{
-webkit-animation-name
:
nutZoomIn-c5e4da9c
;
animation-name
:
nutZoomIn-c5e4da9c
}
.nutZoom-leave-active
[
data-v-c5e4da9c
],
.nutZoomOut
[
data-v-c5e4da9c
]
{
-webkit-animation-name
:
nutZoomOut-c5e4da9c
;
animation-name
:
nutZoomOut-c5e4da9c
}
@-webkit-keyframes
nutEaseIn-c5e4da9c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-c5e4da9c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-c5e4da9c
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-c5e4da9c
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-c5e4da9c
],
.nutEaseIn
[
data-v-c5e4da9c
],
.nutEase-leave-active
[
data-v-c5e4da9c
],
.nutEaseOut
[
data-v-c5e4da9c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-c5e4da9c
],
.nutEaseIn
[
data-v-c5e4da9c
]
{
-webkit-animation-name
:
nutEaseIn-c5e4da9c
;
animation-name
:
nutEaseIn-c5e4da9c
}
.nutEase-leave-active
[
data-v-c5e4da9c
],
.nutEaseOut
[
data-v-c5e4da9c
]
{
-webkit-animation-name
:
nutEaseOut-c5e4da9c
;
animation-name
:
nutEaseOut-c5e4da9c
}
@-webkit-keyframes
nutDropIn-c5e4da9c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-c5e4da9c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-c5e4da9c
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-c5e4da9c
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-c5e4da9c
],
.nutDropIn
[
data-v-c5e4da9c
],
.nutDrop-leave-active
[
data-v-c5e4da9c
],
.nutDropOut
[
data-v-c5e4da9c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-c5e4da9c
],
.nutDropIn
[
data-v-c5e4da9c
]
{
-webkit-animation-name
:
nutDropIn-c5e4da9c
;
animation-name
:
nutDropIn-c5e4da9c
}
.nutDrop-leave-active
[
data-v-c5e4da9c
],
.nutDropOut
[
data-v-c5e4da9c
]
{
-webkit-animation-name
:
nutDropOut-c5e4da9c
;
animation-name
:
nutDropOut-c5e4da9c
}
@-webkit-keyframes
rotation-c5e4da9c
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-c5e4da9c
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-c5e4da9c
],
.nutRotateIn
[
data-v-c5e4da9c
],
.nutRotate-leave-active
[
data-v-c5e4da9c
],
.nutRotateOut
[
data-v-c5e4da9c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-c5e4da9c
],
.nutRotateIn
[
data-v-c5e4da9c
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-c5e4da9c
],
.nutRotateOut
[
data-v-c5e4da9c
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.demo
[
data-v-c5e4da9c
]
{
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-box-orient
:
vertical
;
-webkit-box-direction
:
normal
;
-ms-flex-direction
:
column
;
flex-direction
:
column
}
.demo
.demo-tips
[
data-v-c5e4da9c
]
{
font-size
:
12px
;
color
:
#666
}
3.1.12/demo27.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
fae19b96
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-fae19b96
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-fae19b96
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-fae19b96
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-fae19b96
],
.nutFadeIn
[
data-v-fae19b96
],
.nutFade-leave-active
[
data-v-fae19b96
],
.nutFadeOut
[
data-v-fae19b96
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-fae19b96
],
.nutFadeIn
[
data-v-fae19b96
]
{
-webkit-animation-name
:
nutFadeIn-fae19b96
;
animation-name
:
nutFadeIn-fae19b96
}
.nutFade-leave-active
[
data-v-fae19b96
],
.nutFadeOut
[
data-v-fae19b96
]
{
-webkit-animation-name
:
nutFadeOut-fae19b96
;
animation-name
:
nutFadeOut-fae19b96
}
@-webkit-keyframes
nutZoomIn-fae19b96
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-fae19b96
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-fae19b96
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-fae19b96
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-fae19b96
],
.nutZoomIn
[
data-v-fae19b96
],
.nutZoom-leave-active
[
data-v-fae19b96
],
.nutZoomOut
[
data-v-fae19b96
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-fae19b96
],
.nutZoomIn
[
data-v-fae19b96
]
{
-webkit-animation-name
:
nutZoomIn-fae19b96
;
animation-name
:
nutZoomIn-fae19b96
}
.nutZoom-leave-active
[
data-v-fae19b96
],
.nutZoomOut
[
data-v-fae19b96
]
{
-webkit-animation-name
:
nutZoomOut-fae19b96
;
animation-name
:
nutZoomOut-fae19b96
}
@-webkit-keyframes
nutEaseIn-fae19b96
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-fae19b96
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-fae19b96
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-fae19b96
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-fae19b96
],
.nutEaseIn
[
data-v-fae19b96
],
.nutEase-leave-active
[
data-v-fae19b96
],
.nutEaseOut
[
data-v-fae19b96
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-fae19b96
],
.nutEaseIn
[
data-v-fae19b96
]
{
-webkit-animation-name
:
nutEaseIn-fae19b96
;
animation-name
:
nutEaseIn-fae19b96
}
.nutEase-leave-active
[
data-v-fae19b96
],
.nutEaseOut
[
data-v-fae19b96
]
{
-webkit-animation-name
:
nutEaseOut-fae19b96
;
animation-name
:
nutEaseOut-fae19b96
}
@-webkit-keyframes
nutDropIn-fae19b96
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-fae19b96
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-fae19b96
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-fae19b96
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-fae19b96
],
.nutDropIn
[
data-v-fae19b96
],
.nutDrop-leave-active
[
data-v-fae19b96
],
.nutDropOut
[
data-v-fae19b96
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-fae19b96
],
.nutDropIn
[
data-v-fae19b96
]
{
-webkit-animation-name
:
nutDropIn-fae19b96
;
animation-name
:
nutDropIn-fae19b96
}
.nutDrop-leave-active
[
data-v-fae19b96
],
.nutDropOut
[
data-v-fae19b96
]
{
-webkit-animation-name
:
nutDropOut-fae19b96
;
animation-name
:
nutDropOut-fae19b96
}
@-webkit-keyframes
rotation-fae19b96
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-fae19b96
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-fae19b96
],
.nutRotateIn
[
data-v-fae19b96
],
.nutRotate-leave-active
[
data-v-fae19b96
],
.nutRotateOut
[
data-v-fae19b96
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-fae19b96
],
.nutRotateIn
[
data-v-fae19b96
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-fae19b96
],
.nutRotateOut
[
data-v-fae19b96
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.demo-button-row
[
data-v-fae19b96
]
{
margin-bottom
:
20px
}
.demo-button-row2
[
data-v-fae19b96
]
{
margin-bottom
:
10px
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
;
-ms-flex-wrap
:
wrap
;
flex-wrap
:
wrap
}
.nut-button
[
data-v-fae19b96
]
{
margin-right
:
15px
}
.nut-button
[
data-v-fae19b96
]
:last-child
{
margin-bottom
:
0
;
margin-right
:
0
}
@-webkit-keyframes
nutFadeIn-
99b05c9e
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-99b05c9e
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-99b05c9e
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-99b05c9e
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-99b05c9e
],
.nutFadeIn
[
data-v-99b05c9e
],
.nutFade-leave-active
[
data-v-99b05c9e
],
.nutFadeOut
[
data-v-99b05c9e
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-99b05c9e
],
.nutFadeIn
[
data-v-99b05c9e
]
{
-webkit-animation-name
:
nutFadeIn-99b05c9e
;
animation-name
:
nutFadeIn-99b05c9e
}
.nutFade-leave-active
[
data-v-99b05c9e
],
.nutFadeOut
[
data-v-99b05c9e
]
{
-webkit-animation-name
:
nutFadeOut-99b05c9e
;
animation-name
:
nutFadeOut-99b05c9e
}
@-webkit-keyframes
nutZoomIn-99b05c9e
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-99b05c9e
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-99b05c9e
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-99b05c9e
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-99b05c9e
],
.nutZoomIn
[
data-v-99b05c9e
],
.nutZoom-leave-active
[
data-v-99b05c9e
],
.nutZoomOut
[
data-v-99b05c9e
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-99b05c9e
],
.nutZoomIn
[
data-v-99b05c9e
]
{
-webkit-animation-name
:
nutZoomIn-99b05c9e
;
animation-name
:
nutZoomIn-99b05c9e
}
.nutZoom-leave-active
[
data-v-99b05c9e
],
.nutZoomOut
[
data-v-99b05c9e
]
{
-webkit-animation-name
:
nutZoomOut-99b05c9e
;
animation-name
:
nutZoomOut-99b05c9e
}
@-webkit-keyframes
nutEaseIn-99b05c9e
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-99b05c9e
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-99b05c9e
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-99b05c9e
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-99b05c9e
],
.nutEaseIn
[
data-v-99b05c9e
],
.nutEase-leave-active
[
data-v-99b05c9e
],
.nutEaseOut
[
data-v-99b05c9e
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-99b05c9e
],
.nutEaseIn
[
data-v-99b05c9e
]
{
-webkit-animation-name
:
nutEaseIn-99b05c9e
;
animation-name
:
nutEaseIn-99b05c9e
}
.nutEase-leave-active
[
data-v-99b05c9e
],
.nutEaseOut
[
data-v-99b05c9e
]
{
-webkit-animation-name
:
nutEaseOut-99b05c9e
;
animation-name
:
nutEaseOut-99b05c9e
}
@-webkit-keyframes
nutDropIn-99b05c9e
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-99b05c9e
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-99b05c9e
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-99b05c9e
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-99b05c9e
],
.nutDropIn
[
data-v-99b05c9e
],
.nutDrop-leave-active
[
data-v-99b05c9e
],
.nutDropOut
[
data-v-99b05c9e
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-99b05c9e
],
.nutDropIn
[
data-v-99b05c9e
]
{
-webkit-animation-name
:
nutDropIn-99b05c9e
;
animation-name
:
nutDropIn-99b05c9e
}
.nutDrop-leave-active
[
data-v-99b05c9e
],
.nutDropOut
[
data-v-99b05c9e
]
{
-webkit-animation-name
:
nutDropOut-99b05c9e
;
animation-name
:
nutDropOut-99b05c9e
}
@-webkit-keyframes
rotation-99b05c9e
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-99b05c9e
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-99b05c9e
],
.nutRotateIn
[
data-v-99b05c9e
],
.nutRotate-leave-active
[
data-v-99b05c9e
],
.nutRotateOut
[
data-v-99b05c9e
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-99b05c9e
],
.nutRotateIn
[
data-v-99b05c9e
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-99b05c9e
],
.nutRotateOut
[
data-v-99b05c9e
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.tag
[
data-v-99b05c9e
]
{
display
:
inline-block
;
width
:
50px
;
height
:
15px
;
font-size
:
12px
;
margin-left
:
10px
;
background
:
url(//storage.360buyimg.com/imgtools/bbdf6c9a2a-e3f6fbc0-fb4d-11eb-a27f-676da10c85f4.png)
no-repeat
center
center
;
background-size
:
100%
100%
}
.sku-operate-box
[
data-v-99b05c9e
]
{
width
:
100%
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
padding
:
8px
10px
;
-webkit-box-sizing
:
border-box
;
box-sizing
:
border-box
}
.sku-operate-box
.sku-operate-item
[
data-v-99b05c9e
]
{
width
:
100%
;
-ms-flex-negative
:
1
;
flex-shrink
:
1
}
.sku-operate-box
.sku-operate-item
[
data-v-99b05c9e
]
:first-child
{
border-top-left-radius
:
20px
;
border-bottom-left-radius
:
20px
}
.sku-operate-box
.sku-operate-item
[
data-v-99b05c9e
]
:last-child
{
border-top-right-radius
:
20px
;
border-bottom-right-radius
:
20px
}
.sku-operate-box
.sku-operate-box-dis
[
data-v-99b05c9e
]
{
width
:
100%
;
-ms-flex-negative
:
1
;
flex-shrink
:
1
}
.sku-operate-box
.sku-operate-box-dis
[
data-v-99b05c9e
]
:first-child
{
margin-right
:
18px
}
3.1.12/demo28.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn
-34956fd8
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-34956fd8
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-34956fd8
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-34956fd8
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-34956fd8
],
.nutFadeIn
[
data-v-34956fd8
],
.nutFade-leave-active
[
data-v-34956fd8
],
.nutFadeOut
[
data-v-34956fd8
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-34956fd8
],
.nutFadeIn
[
data-v-34956fd8
]
{
-webkit-animation-name
:
nutFadeIn-34956fd8
;
animation-name
:
nutFadeIn-34956fd8
}
.nutFade-leave-active
[
data-v-34956fd8
],
.nutFadeOut
[
data-v-34956fd8
]
{
-webkit-animation-name
:
nutFadeOut-34956fd8
;
animation-name
:
nutFadeOut-34956fd8
}
@-webkit-keyframes
nutZoomIn-34956fd8
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-34956fd8
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-34956fd8
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-34956fd8
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-34956fd8
],
.nutZoomIn
[
data-v-34956fd8
],
.nutZoom-leave-active
[
data-v-34956fd8
],
.nutZoomOut
[
data-v-34956fd8
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-34956fd8
],
.nutZoomIn
[
data-v-34956fd8
]
{
-webkit-animation-name
:
nutZoomIn-34956fd8
;
animation-name
:
nutZoomIn-34956fd8
}
.nutZoom-leave-active
[
data-v-34956fd8
],
.nutZoomOut
[
data-v-34956fd8
]
{
-webkit-animation-name
:
nutZoomOut-34956fd8
;
animation-name
:
nutZoomOut-34956fd8
}
@-webkit-keyframes
nutEaseIn-34956fd8
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-34956fd8
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-34956fd8
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-34956fd8
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-34956fd8
],
.nutEaseIn
[
data-v-34956fd8
],
.nutEase-leave-active
[
data-v-34956fd8
],
.nutEaseOut
[
data-v-34956fd8
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-34956fd8
],
.nutEaseIn
[
data-v-34956fd8
]
{
-webkit-animation-name
:
nutEaseIn-34956fd8
;
animation-name
:
nutEaseIn-34956fd8
}
.nutEase-leave-active
[
data-v-34956fd8
],
.nutEaseOut
[
data-v-34956fd8
]
{
-webkit-animation-name
:
nutEaseOut-34956fd8
;
animation-name
:
nutEaseOut-34956fd8
}
@-webkit-keyframes
nutDropIn-34956fd8
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-34956fd8
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-34956fd8
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-34956fd8
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-34956fd8
],
.nutDropIn
[
data-v-34956fd8
],
.nutDrop-leave-active
[
data-v-34956fd8
],
.nutDropOut
[
data-v-34956fd8
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-34956fd8
],
.nutDropIn
[
data-v-34956fd8
]
{
-webkit-animation-name
:
nutDropIn-34956fd8
;
animation-name
:
nutDropIn-34956fd8
}
.nutDrop-leave-active
[
data-v-34956fd8
],
.nutDropOut
[
data-v-34956fd8
]
{
-webkit-animation-name
:
nutDropOut-34956fd8
;
animation-name
:
nutDropOut-34956fd8
}
@-webkit-keyframes
rotation-34956fd8
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-34956fd8
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-34956fd8
],
.nutRotateIn
[
data-v-34956fd8
],
.nutRotate-leave-active
[
data-v-34956fd8
],
.nutRotateOut
[
data-v-34956fd8
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-34956fd8
],
.nutRotateIn
[
data-v-34956fd8
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-34956fd8
],
.nutRotateOut
[
data-v-34956fd8
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.test-calendar-wrapper
[
data-v-34956fd8
]
{
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
width
:
100%
;
height
:
613px
;
overflow
:
hidden
}
@-webkit-keyframes
nutFadeIn
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
,
.nutFadeIn
,
.nutFade-leave-active
,
.nutFadeOut
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
,
.nutFadeIn
{
-webkit-animation-name
:
nutFadeIn
;
animation-name
:
nutFadeIn
}
.nutFade-leave-active
,
.nutFadeOut
{
-webkit-animation-name
:
nutFadeOut
;
animation-name
:
nutFadeOut
}
@-webkit-keyframes
nutZoomIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
,
.nutZoomIn
,
.nutZoom-leave-active
,
.nutZoomOut
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
,
.nutZoomIn
{
-webkit-animation-name
:
nutZoomIn
;
animation-name
:
nutZoomIn
}
.nutZoom-leave-active
,
.nutZoomOut
{
-webkit-animation-name
:
nutZoomOut
;
animation-name
:
nutZoomOut
}
@-webkit-keyframes
nutEaseIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
,
.nutEaseIn
,
.nutEase-leave-active
,
.nutEaseOut
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
,
.nutEaseIn
{
-webkit-animation-name
:
nutEaseIn
;
animation-name
:
nutEaseIn
}
.nutEase-leave-active
,
.nutEaseOut
{
-webkit-animation-name
:
nutEaseOut
;
animation-name
:
nutEaseOut
}
@-webkit-keyframes
nutDropIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
,
.nutDropIn
,
.nutDrop-leave-active
,
.nutDropOut
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
,
.nutDropIn
{
-webkit-animation-name
:
nutDropIn
;
animation-name
:
nutDropIn
}
.nutDrop-leave-active
,
.nutDropOut
{
-webkit-animation-name
:
nutDropOut
;
animation-name
:
nutDropOut
}
@-webkit-keyframes
rotation
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
,
.nutRotateIn
,
.nutRotate-leave-active
,
.nutRotateOut
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
,
.nutRotateIn
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
,
.nutRotateOut
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.padding
{
padding-left
:
0
!important
;
padding-right
:
0
!important
}
.padding
h2
{
padding-left
:
27px
!important
}
.steps-wrapper
{
width
:
100%
;
padding
:
15px
0
;
background-color
:
#fff
}
.steps-wrapper
.steps-button
{
text-align
:
center
}
3.1.12/demo3.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
7fc5c86a
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-7fc5c86a
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-7fc5c86a
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-7fc5c86a
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-7fc5c86a
],
.nutFadeIn
[
data-v-7fc5c86a
],
.nutFade-leave-active
[
data-v-7fc5c86a
],
.nutFadeOut
[
data-v-7fc5c86a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-7fc5c86a
],
.nutFadeIn
[
data-v-7fc5c86a
]
{
-webkit-animation-name
:
nutFadeIn-7fc5c86a
;
animation-name
:
nutFadeIn-7fc5c86a
}
.nutFade-leave-active
[
data-v-7fc5c86a
],
.nutFadeOut
[
data-v-7fc5c86a
]
{
-webkit-animation-name
:
nutFadeOut-7fc5c86a
;
animation-name
:
nutFadeOut-7fc5c86a
}
@-webkit-keyframes
nutZoomIn-7fc5c86a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-7fc5c86a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-7fc5c86a
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-7fc5c86a
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-7fc5c86a
],
.nutZoomIn
[
data-v-7fc5c86a
],
.nutZoom-leave-active
[
data-v-7fc5c86a
],
.nutZoomOut
[
data-v-7fc5c86a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-7fc5c86a
],
.nutZoomIn
[
data-v-7fc5c86a
]
{
-webkit-animation-name
:
nutZoomIn-7fc5c86a
;
animation-name
:
nutZoomIn-7fc5c86a
}
.nutZoom-leave-active
[
data-v-7fc5c86a
],
.nutZoomOut
[
data-v-7fc5c86a
]
{
-webkit-animation-name
:
nutZoomOut-7fc5c86a
;
animation-name
:
nutZoomOut-7fc5c86a
}
@-webkit-keyframes
nutEaseIn-7fc5c86a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-7fc5c86a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-7fc5c86a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-7fc5c86a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-7fc5c86a
],
.nutEaseIn
[
data-v-7fc5c86a
],
.nutEase-leave-active
[
data-v-7fc5c86a
],
.nutEaseOut
[
data-v-7fc5c86a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-7fc5c86a
],
.nutEaseIn
[
data-v-7fc5c86a
]
{
-webkit-animation-name
:
nutEaseIn-7fc5c86a
;
animation-name
:
nutEaseIn-7fc5c86a
}
.nutEase-leave-active
[
data-v-7fc5c86a
],
.nutEaseOut
[
data-v-7fc5c86a
]
{
-webkit-animation-name
:
nutEaseOut-7fc5c86a
;
animation-name
:
nutEaseOut-7fc5c86a
}
@-webkit-keyframes
nutDropIn-7fc5c86a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-7fc5c86a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-7fc5c86a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-7fc5c86a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-7fc5c86a
],
.nutDropIn
[
data-v-7fc5c86a
],
.nutDrop-leave-active
[
data-v-7fc5c86a
],
.nutDropOut
[
data-v-7fc5c86a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-7fc5c86a
],
.nutDropIn
[
data-v-7fc5c86a
]
{
-webkit-animation-name
:
nutDropIn-7fc5c86a
;
animation-name
:
nutDropIn-7fc5c86a
}
.nutDrop-leave-active
[
data-v-7fc5c86a
],
.nutDropOut
[
data-v-7fc5c86a
]
{
-webkit-animation-name
:
nutDropOut-7fc5c86a
;
animation-name
:
nutDropOut-7fc5c86a
}
@-webkit-keyframes
rotation-7fc5c86a
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-7fc5c86a
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-7fc5c86a
],
.nutRotateIn
[
data-v-7fc5c86a
],
.nutRotate-leave-active
[
data-v-7fc5c86a
],
.nutRotateOut
[
data-v-7fc5c86a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-7fc5c86a
],
.nutRotateIn
[
data-v-7fc5c86a
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-7fc5c86a
],
.nutRotateOut
[
data-v-7fc5c86a
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.nut-cell
[
data-v-7fc5c86a
],
.nut-barrage
[
data-v-7fc5c86a
]
{
padding
:
20px
0
;
height
:
150px
}
.test
.add
[
data-v-7fc5c86a
]
{
display
:
block
;
padding
:
5px
30px
;
margin
:
20px
auto
;
border-radius
:
15px
;
font-size
:
12px
}
@-webkit-keyframes
nutFadeIn-
34956fd8
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-34956fd8
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-34956fd8
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-34956fd8
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-34956fd8
],
.nutFadeIn
[
data-v-34956fd8
],
.nutFade-leave-active
[
data-v-34956fd8
],
.nutFadeOut
[
data-v-34956fd8
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-34956fd8
],
.nutFadeIn
[
data-v-34956fd8
]
{
-webkit-animation-name
:
nutFadeIn-34956fd8
;
animation-name
:
nutFadeIn-34956fd8
}
.nutFade-leave-active
[
data-v-34956fd8
],
.nutFadeOut
[
data-v-34956fd8
]
{
-webkit-animation-name
:
nutFadeOut-34956fd8
;
animation-name
:
nutFadeOut-34956fd8
}
@-webkit-keyframes
nutZoomIn-34956fd8
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-34956fd8
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-34956fd8
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-34956fd8
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-34956fd8
],
.nutZoomIn
[
data-v-34956fd8
],
.nutZoom-leave-active
[
data-v-34956fd8
],
.nutZoomOut
[
data-v-34956fd8
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-34956fd8
],
.nutZoomIn
[
data-v-34956fd8
]
{
-webkit-animation-name
:
nutZoomIn-34956fd8
;
animation-name
:
nutZoomIn-34956fd8
}
.nutZoom-leave-active
[
data-v-34956fd8
],
.nutZoomOut
[
data-v-34956fd8
]
{
-webkit-animation-name
:
nutZoomOut-34956fd8
;
animation-name
:
nutZoomOut-34956fd8
}
@-webkit-keyframes
nutEaseIn-34956fd8
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-34956fd8
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-34956fd8
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-34956fd8
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-34956fd8
],
.nutEaseIn
[
data-v-34956fd8
],
.nutEase-leave-active
[
data-v-34956fd8
],
.nutEaseOut
[
data-v-34956fd8
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-34956fd8
],
.nutEaseIn
[
data-v-34956fd8
]
{
-webkit-animation-name
:
nutEaseIn-34956fd8
;
animation-name
:
nutEaseIn-34956fd8
}
.nutEase-leave-active
[
data-v-34956fd8
],
.nutEaseOut
[
data-v-34956fd8
]
{
-webkit-animation-name
:
nutEaseOut-34956fd8
;
animation-name
:
nutEaseOut-34956fd8
}
@-webkit-keyframes
nutDropIn-34956fd8
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-34956fd8
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-34956fd8
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-34956fd8
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-34956fd8
],
.nutDropIn
[
data-v-34956fd8
],
.nutDrop-leave-active
[
data-v-34956fd8
],
.nutDropOut
[
data-v-34956fd8
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-34956fd8
],
.nutDropIn
[
data-v-34956fd8
]
{
-webkit-animation-name
:
nutDropIn-34956fd8
;
animation-name
:
nutDropIn-34956fd8
}
.nutDrop-leave-active
[
data-v-34956fd8
],
.nutDropOut
[
data-v-34956fd8
]
{
-webkit-animation-name
:
nutDropOut-34956fd8
;
animation-name
:
nutDropOut-34956fd8
}
@-webkit-keyframes
rotation-34956fd8
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-34956fd8
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-34956fd8
],
.nutRotateIn
[
data-v-34956fd8
],
.nutRotate-leave-active
[
data-v-34956fd8
],
.nutRotateOut
[
data-v-34956fd8
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-34956fd8
],
.nutRotateIn
[
data-v-34956fd8
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-34956fd8
],
.nutRotateOut
[
data-v-34956fd8
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.test-calendar-wrapper
[
data-v-34956fd8
]
{
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
width
:
100%
;
height
:
613px
;
overflow
:
hidden
}
3.1.12/demo30.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
0074b136
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-0074b136
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-0074b136
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-0074b136
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-0074b136
],
.nutFadeIn
[
data-v-0074b136
],
.nutFade-leave-active
[
data-v-0074b136
],
.nutFadeOut
[
data-v-0074b136
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-0074b136
],
.nutFadeIn
[
data-v-0074b136
]
{
-webkit-animation-name
:
nutFadeIn-0074b136
;
animation-name
:
nutFadeIn-0074b136
}
.nutFade-leave-active
[
data-v-0074b136
],
.nutFadeOut
[
data-v-0074b136
]
{
-webkit-animation-name
:
nutFadeOut-0074b136
;
animation-name
:
nutFadeOut-0074b136
}
@-webkit-keyframes
nutZoomIn-0074b136
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-0074b136
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-0074b136
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-0074b136
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-0074b136
],
.nutZoomIn
[
data-v-0074b136
],
.nutZoom-leave-active
[
data-v-0074b136
],
.nutZoomOut
[
data-v-0074b136
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-0074b136
],
.nutZoomIn
[
data-v-0074b136
]
{
-webkit-animation-name
:
nutZoomIn-0074b136
;
animation-name
:
nutZoomIn-0074b136
}
.nutZoom-leave-active
[
data-v-0074b136
],
.nutZoomOut
[
data-v-0074b136
]
{
-webkit-animation-name
:
nutZoomOut-0074b136
;
animation-name
:
nutZoomOut-0074b136
}
@-webkit-keyframes
nutEaseIn-0074b136
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-0074b136
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-0074b136
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-0074b136
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-0074b136
],
.nutEaseIn
[
data-v-0074b136
],
.nutEase-leave-active
[
data-v-0074b136
],
.nutEaseOut
[
data-v-0074b136
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-0074b136
],
.nutEaseIn
[
data-v-0074b136
]
{
-webkit-animation-name
:
nutEaseIn-0074b136
;
animation-name
:
nutEaseIn-0074b136
}
.nutEase-leave-active
[
data-v-0074b136
],
.nutEaseOut
[
data-v-0074b136
]
{
-webkit-animation-name
:
nutEaseOut-0074b136
;
animation-name
:
nutEaseOut-0074b136
}
@-webkit-keyframes
nutDropIn-0074b136
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-0074b136
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-0074b136
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-0074b136
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-0074b136
],
.nutDropIn
[
data-v-0074b136
],
.nutDrop-leave-active
[
data-v-0074b136
],
.nutDropOut
[
data-v-0074b136
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-0074b136
],
.nutDropIn
[
data-v-0074b136
]
{
-webkit-animation-name
:
nutDropIn-0074b136
;
animation-name
:
nutDropIn-0074b136
}
.nutDrop-leave-active
[
data-v-0074b136
],
.nutDropOut
[
data-v-0074b136
]
{
-webkit-animation-name
:
nutDropOut-0074b136
;
animation-name
:
nutDropOut-0074b136
}
@-webkit-keyframes
rotation-0074b136
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-0074b136
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-0074b136
],
.nutRotateIn
[
data-v-0074b136
],
.nutRotate-leave-active
[
data-v-0074b136
],
.nutRotateOut
[
data-v-0074b136
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-0074b136
],
.nutRotateIn
[
data-v-0074b136
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-0074b136
],
.nutRotateOut
[
data-v-0074b136
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.search_prolist_attr
[
data-v-0074b136
]
{
margin
:
3px
0
1px
;
height
:
15px
;
overflow
:
hidden
}
.search_prolist_attr
>
span
[
data-v-0074b136
]
{
float
:
left
;
padding
:
0
5px
;
border-radius
:
1px
;
font-size
:
10px
;
height
:
15px
;
line-height
:
15px
;
color
:
#999
;
background-color
:
#f2f2f7
;
margin-right
:
5px
}
.tag
[
data-v-0074b136
]
{
display
:
inline-block
;
vertical-align
:
middle
;
margin-right
:
5px
;
margin-left
:
2px
;
height
:
14px
}
.customize
[
data-v-0074b136
]
{
font-size
:
12px
}
@-webkit-keyframes
nutFadeIn-
63faedaf
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-63faedaf
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-63faedaf
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-63faedaf
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-63faedaf
],
.nutFadeIn
[
data-v-63faedaf
],
.nutFade-leave-active
[
data-v-63faedaf
],
.nutFadeOut
[
data-v-63faedaf
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-63faedaf
],
.nutFadeIn
[
data-v-63faedaf
]
{
-webkit-animation-name
:
nutFadeIn-63faedaf
;
animation-name
:
nutFadeIn-63faedaf
}
.nutFade-leave-active
[
data-v-63faedaf
],
.nutFadeOut
[
data-v-63faedaf
]
{
-webkit-animation-name
:
nutFadeOut-63faedaf
;
animation-name
:
nutFadeOut-63faedaf
}
@-webkit-keyframes
nutZoomIn-63faedaf
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-63faedaf
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-63faedaf
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-63faedaf
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-63faedaf
],
.nutZoomIn
[
data-v-63faedaf
],
.nutZoom-leave-active
[
data-v-63faedaf
],
.nutZoomOut
[
data-v-63faedaf
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-63faedaf
],
.nutZoomIn
[
data-v-63faedaf
]
{
-webkit-animation-name
:
nutZoomIn-63faedaf
;
animation-name
:
nutZoomIn-63faedaf
}
.nutZoom-leave-active
[
data-v-63faedaf
],
.nutZoomOut
[
data-v-63faedaf
]
{
-webkit-animation-name
:
nutZoomOut-63faedaf
;
animation-name
:
nutZoomOut-63faedaf
}
@-webkit-keyframes
nutEaseIn-63faedaf
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-63faedaf
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-63faedaf
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-63faedaf
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-63faedaf
],
.nutEaseIn
[
data-v-63faedaf
],
.nutEase-leave-active
[
data-v-63faedaf
],
.nutEaseOut
[
data-v-63faedaf
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-63faedaf
],
.nutEaseIn
[
data-v-63faedaf
]
{
-webkit-animation-name
:
nutEaseIn-63faedaf
;
animation-name
:
nutEaseIn-63faedaf
}
.nutEase-leave-active
[
data-v-63faedaf
],
.nutEaseOut
[
data-v-63faedaf
]
{
-webkit-animation-name
:
nutEaseOut-63faedaf
;
animation-name
:
nutEaseOut-63faedaf
}
@-webkit-keyframes
nutDropIn-63faedaf
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-63faedaf
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-63faedaf
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-63faedaf
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-63faedaf
],
.nutDropIn
[
data-v-63faedaf
],
.nutDrop-leave-active
[
data-v-63faedaf
],
.nutDropOut
[
data-v-63faedaf
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-63faedaf
],
.nutDropIn
[
data-v-63faedaf
]
{
-webkit-animation-name
:
nutDropIn-63faedaf
;
animation-name
:
nutDropIn-63faedaf
}
.nutDrop-leave-active
[
data-v-63faedaf
],
.nutDropOut
[
data-v-63faedaf
]
{
-webkit-animation-name
:
nutDropOut-63faedaf
;
animation-name
:
nutDropOut-63faedaf
}
@-webkit-keyframes
rotation-63faedaf
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-63faedaf
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-63faedaf
],
.nutRotateIn
[
data-v-63faedaf
],
.nutRotate-leave-active
[
data-v-63faedaf
],
.nutRotateOut
[
data-v-63faedaf
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-63faedaf
],
.nutRotateIn
[
data-v-63faedaf
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-63faedaf
],
.nutRotateOut
[
data-v-63faedaf
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
3.1.12/demo31.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
abf2808c
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-abf2808c
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-abf2808c
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-abf2808c
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-abf2808c
],
.nutFadeIn
[
data-v-abf2808c
],
.nutFade-leave-active
[
data-v-abf2808c
],
.nutFadeOut
[
data-v-abf2808c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-abf2808c
],
.nutFadeIn
[
data-v-abf2808c
]
{
-webkit-animation-name
:
nutFadeIn-abf2808c
;
animation-name
:
nutFadeIn-abf2808c
}
.nutFade-leave-active
[
data-v-abf2808c
],
.nutFadeOut
[
data-v-abf2808c
]
{
-webkit-animation-name
:
nutFadeOut-abf2808c
;
animation-name
:
nutFadeOut-abf2808c
}
@-webkit-keyframes
nutZoomIn-abf2808c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-abf2808c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-abf2808c
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-abf2808c
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-abf2808c
],
.nutZoomIn
[
data-v-abf2808c
],
.nutZoom-leave-active
[
data-v-abf2808c
],
.nutZoomOut
[
data-v-abf2808c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-abf2808c
],
.nutZoomIn
[
data-v-abf2808c
]
{
-webkit-animation-name
:
nutZoomIn-abf2808c
;
animation-name
:
nutZoomIn-abf2808c
}
.nutZoom-leave-active
[
data-v-abf2808c
],
.nutZoomOut
[
data-v-abf2808c
]
{
-webkit-animation-name
:
nutZoomOut-abf2808c
;
animation-name
:
nutZoomOut-abf2808c
}
@-webkit-keyframes
nutEaseIn-abf2808c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-abf2808c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-abf2808c
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-abf2808c
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-abf2808c
],
.nutEaseIn
[
data-v-abf2808c
],
.nutEase-leave-active
[
data-v-abf2808c
],
.nutEaseOut
[
data-v-abf2808c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-abf2808c
],
.nutEaseIn
[
data-v-abf2808c
]
{
-webkit-animation-name
:
nutEaseIn-abf2808c
;
animation-name
:
nutEaseIn-abf2808c
}
.nutEase-leave-active
[
data-v-abf2808c
],
.nutEaseOut
[
data-v-abf2808c
]
{
-webkit-animation-name
:
nutEaseOut-abf2808c
;
animation-name
:
nutEaseOut-abf2808c
}
@-webkit-keyframes
nutDropIn-abf2808c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-abf2808c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-abf2808c
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-abf2808c
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-abf2808c
],
.nutDropIn
[
data-v-abf2808c
],
.nutDrop-leave-active
[
data-v-abf2808c
],
.nutDropOut
[
data-v-abf2808c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-abf2808c
],
.nutDropIn
[
data-v-abf2808c
]
{
-webkit-animation-name
:
nutDropIn-abf2808c
;
animation-name
:
nutDropIn-abf2808c
}
.nutDrop-leave-active
[
data-v-abf2808c
],
.nutDropOut
[
data-v-abf2808c
]
{
-webkit-animation-name
:
nutDropOut-abf2808c
;
animation-name
:
nutDropOut-abf2808c
}
@-webkit-keyframes
rotation-abf2808c
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-abf2808c
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-abf2808c
],
.nutRotateIn
[
data-v-abf2808c
],
.nutRotate-leave-active
[
data-v-abf2808c
],
.nutRotateOut
[
data-v-abf2808c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-abf2808c
],
.nutRotateIn
[
data-v-abf2808c
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-abf2808c
],
.nutRotateOut
[
data-v-abf2808c
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.custom-wrap
[
data-v-abf2808c
]
{
padding
:
110px
0
;
text-align
:
center
}
.nut-cell
[
data-v-abf2808c
]
{
-webkit-box-pack
:
justify
;
-ms-flex-pack
:
justify
;
justify-content
:
space-between
}
.myContent
[
data-v-abf2808c
]
{
padding
:
10px
10px
160px
}
@-webkit-keyframes
nutFadeIn-
2db6a625
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-2db6a625
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-2db6a625
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-2db6a625
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-2db6a625
],
.nutFadeIn
[
data-v-2db6a625
],
.nutFade-leave-active
[
data-v-2db6a625
],
.nutFadeOut
[
data-v-2db6a625
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-2db6a625
],
.nutFadeIn
[
data-v-2db6a625
]
{
-webkit-animation-name
:
nutFadeIn-2db6a625
;
animation-name
:
nutFadeIn-2db6a625
}
.nutFade-leave-active
[
data-v-2db6a625
],
.nutFadeOut
[
data-v-2db6a625
]
{
-webkit-animation-name
:
nutFadeOut-2db6a625
;
animation-name
:
nutFadeOut-2db6a625
}
@-webkit-keyframes
nutZoomIn-2db6a625
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-2db6a625
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-2db6a625
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-2db6a625
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-2db6a625
],
.nutZoomIn
[
data-v-2db6a625
],
.nutZoom-leave-active
[
data-v-2db6a625
],
.nutZoomOut
[
data-v-2db6a625
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-2db6a625
],
.nutZoomIn
[
data-v-2db6a625
]
{
-webkit-animation-name
:
nutZoomIn-2db6a625
;
animation-name
:
nutZoomIn-2db6a625
}
.nutZoom-leave-active
[
data-v-2db6a625
],
.nutZoomOut
[
data-v-2db6a625
]
{
-webkit-animation-name
:
nutZoomOut-2db6a625
;
animation-name
:
nutZoomOut-2db6a625
}
@-webkit-keyframes
nutEaseIn-2db6a625
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-2db6a625
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-2db6a625
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-2db6a625
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-2db6a625
],
.nutEaseIn
[
data-v-2db6a625
],
.nutEase-leave-active
[
data-v-2db6a625
],
.nutEaseOut
[
data-v-2db6a625
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-2db6a625
],
.nutEaseIn
[
data-v-2db6a625
]
{
-webkit-animation-name
:
nutEaseIn-2db6a625
;
animation-name
:
nutEaseIn-2db6a625
}
.nutEase-leave-active
[
data-v-2db6a625
],
.nutEaseOut
[
data-v-2db6a625
]
{
-webkit-animation-name
:
nutEaseOut-2db6a625
;
animation-name
:
nutEaseOut-2db6a625
}
@-webkit-keyframes
nutDropIn-2db6a625
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-2db6a625
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-2db6a625
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-2db6a625
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-2db6a625
],
.nutDropIn
[
data-v-2db6a625
],
.nutDrop-leave-active
[
data-v-2db6a625
],
.nutDropOut
[
data-v-2db6a625
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-2db6a625
],
.nutDropIn
[
data-v-2db6a625
]
{
-webkit-animation-name
:
nutDropIn-2db6a625
;
animation-name
:
nutDropIn-2db6a625
}
.nutDrop-leave-active
[
data-v-2db6a625
],
.nutDropOut
[
data-v-2db6a625
]
{
-webkit-animation-name
:
nutDropOut-2db6a625
;
animation-name
:
nutDropOut-2db6a625
}
@-webkit-keyframes
rotation-2db6a625
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-2db6a625
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-2db6a625
],
.nutRotateIn
[
data-v-2db6a625
],
.nutRotate-leave-active
[
data-v-2db6a625
],
.nutRotateOut
[
data-v-2db6a625
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-2db6a625
],
.nutRotateIn
[
data-v-2db6a625
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-2db6a625
],
.nutRotateOut
[
data-v-2db6a625
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
3.1.12/demo32.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
63faedaf
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-63faedaf
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-63faedaf
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-63faedaf
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-63faedaf
],
.nutFadeIn
[
data-v-63faedaf
],
.nutFade-leave-active
[
data-v-63faedaf
],
.nutFadeOut
[
data-v-63faedaf
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-63faedaf
],
.nutFadeIn
[
data-v-63faedaf
]
{
-webkit-animation-name
:
nutFadeIn-63faedaf
;
animation-name
:
nutFadeIn-63faedaf
}
.nutFade-leave-active
[
data-v-63faedaf
],
.nutFadeOut
[
data-v-63faedaf
]
{
-webkit-animation-name
:
nutFadeOut-63faedaf
;
animation-name
:
nutFadeOut-63faedaf
}
@-webkit-keyframes
nutZoomIn-63faedaf
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-63faedaf
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-63faedaf
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-63faedaf
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-63faedaf
],
.nutZoomIn
[
data-v-63faedaf
],
.nutZoom-leave-active
[
data-v-63faedaf
],
.nutZoomOut
[
data-v-63faedaf
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-63faedaf
],
.nutZoomIn
[
data-v-63faedaf
]
{
-webkit-animation-name
:
nutZoomIn-63faedaf
;
animation-name
:
nutZoomIn-63faedaf
}
.nutZoom-leave-active
[
data-v-63faedaf
],
.nutZoomOut
[
data-v-63faedaf
]
{
-webkit-animation-name
:
nutZoomOut-63faedaf
;
animation-name
:
nutZoomOut-63faedaf
}
@-webkit-keyframes
nutEaseIn-63faedaf
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-63faedaf
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-63faedaf
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-63faedaf
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-63faedaf
],
.nutEaseIn
[
data-v-63faedaf
],
.nutEase-leave-active
[
data-v-63faedaf
],
.nutEaseOut
[
data-v-63faedaf
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-63faedaf
],
.nutEaseIn
[
data-v-63faedaf
]
{
-webkit-animation-name
:
nutEaseIn-63faedaf
;
animation-name
:
nutEaseIn-63faedaf
}
.nutEase-leave-active
[
data-v-63faedaf
],
.nutEaseOut
[
data-v-63faedaf
]
{
-webkit-animation-name
:
nutEaseOut-63faedaf
;
animation-name
:
nutEaseOut-63faedaf
}
@-webkit-keyframes
nutDropIn-63faedaf
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-63faedaf
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-63faedaf
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-63faedaf
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-63faedaf
],
.nutDropIn
[
data-v-63faedaf
],
.nutDrop-leave-active
[
data-v-63faedaf
],
.nutDropOut
[
data-v-63faedaf
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-63faedaf
],
.nutDropIn
[
data-v-63faedaf
]
{
-webkit-animation-name
:
nutDropIn-63faedaf
;
animation-name
:
nutDropIn-63faedaf
}
.nutDrop-leave-active
[
data-v-63faedaf
],
.nutDropOut
[
data-v-63faedaf
]
{
-webkit-animation-name
:
nutDropOut-63faedaf
;
animation-name
:
nutDropOut-63faedaf
}
@-webkit-keyframes
rotation-63faedaf
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-63faedaf
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-63faedaf
],
.nutRotateIn
[
data-v-63faedaf
],
.nutRotate-leave-active
[
data-v-63faedaf
],
.nutRotateOut
[
data-v-63faedaf
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-63faedaf
],
.nutRotateIn
[
data-v-63faedaf
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-63faedaf
],
.nutRotateOut
[
data-v-63faedaf
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
@-webkit-keyframes
nutFadeIn-
1faf7bac
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-1faf7bac
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-1faf7bac
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-1faf7bac
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-1faf7bac
],
.nutFadeIn
[
data-v-1faf7bac
],
.nutFade-leave-active
[
data-v-1faf7bac
],
.nutFadeOut
[
data-v-1faf7bac
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-1faf7bac
],
.nutFadeIn
[
data-v-1faf7bac
]
{
-webkit-animation-name
:
nutFadeIn-1faf7bac
;
animation-name
:
nutFadeIn-1faf7bac
}
.nutFade-leave-active
[
data-v-1faf7bac
],
.nutFadeOut
[
data-v-1faf7bac
]
{
-webkit-animation-name
:
nutFadeOut-1faf7bac
;
animation-name
:
nutFadeOut-1faf7bac
}
@-webkit-keyframes
nutZoomIn-1faf7bac
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-1faf7bac
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-1faf7bac
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-1faf7bac
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-1faf7bac
],
.nutZoomIn
[
data-v-1faf7bac
],
.nutZoom-leave-active
[
data-v-1faf7bac
],
.nutZoomOut
[
data-v-1faf7bac
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-1faf7bac
],
.nutZoomIn
[
data-v-1faf7bac
]
{
-webkit-animation-name
:
nutZoomIn-1faf7bac
;
animation-name
:
nutZoomIn-1faf7bac
}
.nutZoom-leave-active
[
data-v-1faf7bac
],
.nutZoomOut
[
data-v-1faf7bac
]
{
-webkit-animation-name
:
nutZoomOut-1faf7bac
;
animation-name
:
nutZoomOut-1faf7bac
}
@-webkit-keyframes
nutEaseIn-1faf7bac
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-1faf7bac
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-1faf7bac
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-1faf7bac
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-1faf7bac
],
.nutEaseIn
[
data-v-1faf7bac
],
.nutEase-leave-active
[
data-v-1faf7bac
],
.nutEaseOut
[
data-v-1faf7bac
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-1faf7bac
],
.nutEaseIn
[
data-v-1faf7bac
]
{
-webkit-animation-name
:
nutEaseIn-1faf7bac
;
animation-name
:
nutEaseIn-1faf7bac
}
.nutEase-leave-active
[
data-v-1faf7bac
],
.nutEaseOut
[
data-v-1faf7bac
]
{
-webkit-animation-name
:
nutEaseOut-1faf7bac
;
animation-name
:
nutEaseOut-1faf7bac
}
@-webkit-keyframes
nutDropIn-1faf7bac
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-1faf7bac
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-1faf7bac
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-1faf7bac
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-1faf7bac
],
.nutDropIn
[
data-v-1faf7bac
],
.nutDrop-leave-active
[
data-v-1faf7bac
],
.nutDropOut
[
data-v-1faf7bac
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-1faf7bac
],
.nutDropIn
[
data-v-1faf7bac
]
{
-webkit-animation-name
:
nutDropIn-1faf7bac
;
animation-name
:
nutDropIn-1faf7bac
}
.nutDrop-leave-active
[
data-v-1faf7bac
],
.nutDropOut
[
data-v-1faf7bac
]
{
-webkit-animation-name
:
nutDropOut-1faf7bac
;
animation-name
:
nutDropOut-1faf7bac
}
@-webkit-keyframes
rotation-1faf7bac
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-1faf7bac
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-1faf7bac
],
.nutRotateIn
[
data-v-1faf7bac
],
.nutRotate-leave-active
[
data-v-1faf7bac
],
.nutRotateOut
[
data-v-1faf7bac
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-1faf7bac
],
.nutRotateIn
[
data-v-1faf7bac
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-1faf7bac
],
.nutRotateOut
[
data-v-1faf7bac
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
3.1.12/demo33.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
2db6a625
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-2db6a625
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-2db6a625
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-2db6a625
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-2db6a625
],
.nutFadeIn
[
data-v-2db6a625
],
.nutFade-leave-active
[
data-v-2db6a625
],
.nutFadeOut
[
data-v-2db6a625
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-2db6a625
],
.nutFadeIn
[
data-v-2db6a625
]
{
-webkit-animation-name
:
nutFadeIn-2db6a625
;
animation-name
:
nutFadeIn-2db6a625
}
.nutFade-leave-active
[
data-v-2db6a625
],
.nutFadeOut
[
data-v-2db6a625
]
{
-webkit-animation-name
:
nutFadeOut-2db6a625
;
animation-name
:
nutFadeOut-2db6a625
}
@-webkit-keyframes
nutZoomIn-2db6a625
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-2db6a625
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-2db6a625
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-2db6a625
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-2db6a625
],
.nutZoomIn
[
data-v-2db6a625
],
.nutZoom-leave-active
[
data-v-2db6a625
],
.nutZoomOut
[
data-v-2db6a625
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-2db6a625
],
.nutZoomIn
[
data-v-2db6a625
]
{
-webkit-animation-name
:
nutZoomIn-2db6a625
;
animation-name
:
nutZoomIn-2db6a625
}
.nutZoom-leave-active
[
data-v-2db6a625
],
.nutZoomOut
[
data-v-2db6a625
]
{
-webkit-animation-name
:
nutZoomOut-2db6a625
;
animation-name
:
nutZoomOut-2db6a625
}
@-webkit-keyframes
nutEaseIn-2db6a625
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-2db6a625
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-2db6a625
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-2db6a625
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-2db6a625
],
.nutEaseIn
[
data-v-2db6a625
],
.nutEase-leave-active
[
data-v-2db6a625
],
.nutEaseOut
[
data-v-2db6a625
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-2db6a625
],
.nutEaseIn
[
data-v-2db6a625
]
{
-webkit-animation-name
:
nutEaseIn-2db6a625
;
animation-name
:
nutEaseIn-2db6a625
}
.nutEase-leave-active
[
data-v-2db6a625
],
.nutEaseOut
[
data-v-2db6a625
]
{
-webkit-animation-name
:
nutEaseOut-2db6a625
;
animation-name
:
nutEaseOut-2db6a625
}
@-webkit-keyframes
nutDropIn-2db6a625
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-2db6a625
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-2db6a625
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-2db6a625
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-2db6a625
],
.nutDropIn
[
data-v-2db6a625
],
.nutDrop-leave-active
[
data-v-2db6a625
],
.nutDropOut
[
data-v-2db6a625
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-2db6a625
],
.nutDropIn
[
data-v-2db6a625
]
{
-webkit-animation-name
:
nutDropIn-2db6a625
;
animation-name
:
nutDropIn-2db6a625
}
.nutDrop-leave-active
[
data-v-2db6a625
],
.nutDropOut
[
data-v-2db6a625
]
{
-webkit-animation-name
:
nutDropOut-2db6a625
;
animation-name
:
nutDropOut-2db6a625
}
@-webkit-keyframes
rotation-2db6a625
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-2db6a625
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-2db6a625
],
.nutRotateIn
[
data-v-2db6a625
],
.nutRotate-leave-active
[
data-v-2db6a625
],
.nutRotateOut
[
data-v-2db6a625
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-2db6a625
],
.nutRotateIn
[
data-v-2db6a625
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-2db6a625
],
.nutRotateOut
[
data-v-2db6a625
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
@-webkit-keyframes
nutFadeIn-
0e5856ef
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-0e5856ef
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-0e5856ef
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-0e5856ef
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-0e5856ef
],
.nutFadeIn
[
data-v-0e5856ef
],
.nutFade-leave-active
[
data-v-0e5856ef
],
.nutFadeOut
[
data-v-0e5856ef
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-0e5856ef
],
.nutFadeIn
[
data-v-0e5856ef
]
{
-webkit-animation-name
:
nutFadeIn-0e5856ef
;
animation-name
:
nutFadeIn-0e5856ef
}
.nutFade-leave-active
[
data-v-0e5856ef
],
.nutFadeOut
[
data-v-0e5856ef
]
{
-webkit-animation-name
:
nutFadeOut-0e5856ef
;
animation-name
:
nutFadeOut-0e5856ef
}
@-webkit-keyframes
nutZoomIn-0e5856ef
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-0e5856ef
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-0e5856ef
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-0e5856ef
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-0e5856ef
],
.nutZoomIn
[
data-v-0e5856ef
],
.nutZoom-leave-active
[
data-v-0e5856ef
],
.nutZoomOut
[
data-v-0e5856ef
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-0e5856ef
],
.nutZoomIn
[
data-v-0e5856ef
]
{
-webkit-animation-name
:
nutZoomIn-0e5856ef
;
animation-name
:
nutZoomIn-0e5856ef
}
.nutZoom-leave-active
[
data-v-0e5856ef
],
.nutZoomOut
[
data-v-0e5856ef
]
{
-webkit-animation-name
:
nutZoomOut-0e5856ef
;
animation-name
:
nutZoomOut-0e5856ef
}
@-webkit-keyframes
nutEaseIn-0e5856ef
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-0e5856ef
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-0e5856ef
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-0e5856ef
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-0e5856ef
],
.nutEaseIn
[
data-v-0e5856ef
],
.nutEase-leave-active
[
data-v-0e5856ef
],
.nutEaseOut
[
data-v-0e5856ef
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-0e5856ef
],
.nutEaseIn
[
data-v-0e5856ef
]
{
-webkit-animation-name
:
nutEaseIn-0e5856ef
;
animation-name
:
nutEaseIn-0e5856ef
}
.nutEase-leave-active
[
data-v-0e5856ef
],
.nutEaseOut
[
data-v-0e5856ef
]
{
-webkit-animation-name
:
nutEaseOut-0e5856ef
;
animation-name
:
nutEaseOut-0e5856ef
}
@-webkit-keyframes
nutDropIn-0e5856ef
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-0e5856ef
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-0e5856ef
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-0e5856ef
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-0e5856ef
],
.nutDropIn
[
data-v-0e5856ef
],
.nutDrop-leave-active
[
data-v-0e5856ef
],
.nutDropOut
[
data-v-0e5856ef
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-0e5856ef
],
.nutDropIn
[
data-v-0e5856ef
]
{
-webkit-animation-name
:
nutDropIn-0e5856ef
;
animation-name
:
nutDropIn-0e5856ef
}
.nutDrop-leave-active
[
data-v-0e5856ef
],
.nutDropOut
[
data-v-0e5856ef
]
{
-webkit-animation-name
:
nutDropOut-0e5856ef
;
animation-name
:
nutDropOut-0e5856ef
}
@-webkit-keyframes
rotation-0e5856ef
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-0e5856ef
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-0e5856ef
],
.nutRotateIn
[
data-v-0e5856ef
],
.nutRotate-leave-active
[
data-v-0e5856ef
],
.nutRotateOut
[
data-v-0e5856ef
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-0e5856ef
],
.nutRotateIn
[
data-v-0e5856ef
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-0e5856ef
],
.nutRotateOut
[
data-v-0e5856ef
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
3.1.12/demo34.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
40a3637c
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-40a3637c
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-40a3637c
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-40a3637c
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-40a3637c
],
.nutFadeIn
[
data-v-40a3637c
],
.nutFade-leave-active
[
data-v-40a3637c
],
.nutFadeOut
[
data-v-40a3637c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-40a3637c
],
.nutFadeIn
[
data-v-40a3637c
]
{
-webkit-animation-name
:
nutFadeIn-40a3637c
;
animation-name
:
nutFadeIn-40a3637c
}
.nutFade-leave-active
[
data-v-40a3637c
],
.nutFadeOut
[
data-v-40a3637c
]
{
-webkit-animation-name
:
nutFadeOut-40a3637c
;
animation-name
:
nutFadeOut-40a3637c
}
@-webkit-keyframes
nutZoomIn-40a3637c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-40a3637c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-40a3637c
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-40a3637c
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-40a3637c
],
.nutZoomIn
[
data-v-40a3637c
],
.nutZoom-leave-active
[
data-v-40a3637c
],
.nutZoomOut
[
data-v-40a3637c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-40a3637c
],
.nutZoomIn
[
data-v-40a3637c
]
{
-webkit-animation-name
:
nutZoomIn-40a3637c
;
animation-name
:
nutZoomIn-40a3637c
}
.nutZoom-leave-active
[
data-v-40a3637c
],
.nutZoomOut
[
data-v-40a3637c
]
{
-webkit-animation-name
:
nutZoomOut-40a3637c
;
animation-name
:
nutZoomOut-40a3637c
}
@-webkit-keyframes
nutEaseIn-40a3637c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-40a3637c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-40a3637c
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-40a3637c
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-40a3637c
],
.nutEaseIn
[
data-v-40a3637c
],
.nutEase-leave-active
[
data-v-40a3637c
],
.nutEaseOut
[
data-v-40a3637c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-40a3637c
],
.nutEaseIn
[
data-v-40a3637c
]
{
-webkit-animation-name
:
nutEaseIn-40a3637c
;
animation-name
:
nutEaseIn-40a3637c
}
.nutEase-leave-active
[
data-v-40a3637c
],
.nutEaseOut
[
data-v-40a3637c
]
{
-webkit-animation-name
:
nutEaseOut-40a3637c
;
animation-name
:
nutEaseOut-40a3637c
}
@-webkit-keyframes
nutDropIn-40a3637c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-40a3637c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-40a3637c
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-40a3637c
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-40a3637c
],
.nutDropIn
[
data-v-40a3637c
],
.nutDrop-leave-active
[
data-v-40a3637c
],
.nutDropOut
[
data-v-40a3637c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-40a3637c
],
.nutDropIn
[
data-v-40a3637c
]
{
-webkit-animation-name
:
nutDropIn-40a3637c
;
animation-name
:
nutDropIn-40a3637c
}
.nutDrop-leave-active
[
data-v-40a3637c
],
.nutDropOut
[
data-v-40a3637c
]
{
-webkit-animation-name
:
nutDropOut-40a3637c
;
animation-name
:
nutDropOut-40a3637c
}
@-webkit-keyframes
rotation-40a3637c
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-40a3637c
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-40a3637c
],
.nutRotateIn
[
data-v-40a3637c
],
.nutRotate-leave-active
[
data-v-40a3637c
],
.nutRotateOut
[
data-v-40a3637c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-40a3637c
],
.nutRotateIn
[
data-v-40a3637c
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-40a3637c
],
.nutRotateOut
[
data-v-40a3637c
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.nut-cell
[
data-v-40a3637c
]
{
-webkit-box-align
:
end
;
-ms-flex-align
:
end
;
align-items
:
flex-end
;
border-radius
:
0
}
.demo-avatar
[
data-v-40a3637c
]
{
color
:
#fff
}
.nut-avatar
[
data-v-40a3637c
]
{
margin-right
:
24
px
}
@-webkit-keyframes
nutFadeIn-
1a1fa3ea
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-1a1fa3ea
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-1a1fa3ea
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-1a1fa3ea
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-1a1fa3ea
],
.nutFadeIn
[
data-v-1a1fa3ea
],
.nutFade-leave-active
[
data-v-1a1fa3ea
],
.nutFadeOut
[
data-v-1a1fa3ea
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-1a1fa3ea
],
.nutFadeIn
[
data-v-1a1fa3ea
]
{
-webkit-animation-name
:
nutFadeIn-1a1fa3ea
;
animation-name
:
nutFadeIn-1a1fa3ea
}
.nutFade-leave-active
[
data-v-1a1fa3ea
],
.nutFadeOut
[
data-v-1a1fa3ea
]
{
-webkit-animation-name
:
nutFadeOut-1a1fa3ea
;
animation-name
:
nutFadeOut-1a1fa3ea
}
@-webkit-keyframes
nutZoomIn-1a1fa3ea
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-1a1fa3ea
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-1a1fa3ea
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-1a1fa3ea
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-1a1fa3ea
],
.nutZoomIn
[
data-v-1a1fa3ea
],
.nutZoom-leave-active
[
data-v-1a1fa3ea
],
.nutZoomOut
[
data-v-1a1fa3ea
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-1a1fa3ea
],
.nutZoomIn
[
data-v-1a1fa3ea
]
{
-webkit-animation-name
:
nutZoomIn-1a1fa3ea
;
animation-name
:
nutZoomIn-1a1fa3ea
}
.nutZoom-leave-active
[
data-v-1a1fa3ea
],
.nutZoomOut
[
data-v-1a1fa3ea
]
{
-webkit-animation-name
:
nutZoomOut-1a1fa3ea
;
animation-name
:
nutZoomOut-1a1fa3ea
}
@-webkit-keyframes
nutEaseIn-1a1fa3ea
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-1a1fa3ea
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-1a1fa3ea
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-1a1fa3ea
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-1a1fa3ea
],
.nutEaseIn
[
data-v-1a1fa3ea
],
.nutEase-leave-active
[
data-v-1a1fa3ea
],
.nutEaseOut
[
data-v-1a1fa3ea
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-1a1fa3ea
],
.nutEaseIn
[
data-v-1a1fa3ea
]
{
-webkit-animation-name
:
nutEaseIn-1a1fa3ea
;
animation-name
:
nutEaseIn-1a1fa3ea
}
.nutEase-leave-active
[
data-v-1a1fa3ea
],
.nutEaseOut
[
data-v-1a1fa3ea
]
{
-webkit-animation-name
:
nutEaseOut-1a1fa3ea
;
animation-name
:
nutEaseOut-1a1fa3ea
}
@-webkit-keyframes
nutDropIn-1a1fa3ea
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-1a1fa3ea
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-1a1fa3ea
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-1a1fa3ea
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-1a1fa3ea
],
.nutDropIn
[
data-v-1a1fa3ea
],
.nutDrop-leave-active
[
data-v-1a1fa3ea
],
.nutDropOut
[
data-v-1a1fa3ea
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-1a1fa3ea
],
.nutDropIn
[
data-v-1a1fa3ea
]
{
-webkit-animation-name
:
nutDropIn-1a1fa3ea
;
animation-name
:
nutDropIn-1a1fa3ea
}
.nutDrop-leave-active
[
data-v-1a1fa3ea
],
.nutDropOut
[
data-v-1a1fa3ea
]
{
-webkit-animation-name
:
nutDropOut-1a1fa3ea
;
animation-name
:
nutDropOut-1a1fa3ea
}
@-webkit-keyframes
rotation-1a1fa3ea
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-1a1fa3ea
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-1a1fa3ea
],
.nutRotateIn
[
data-v-1a1fa3ea
],
.nutRotate-leave-active
[
data-v-1a1fa3ea
],
.nutRotateOut
[
data-v-1a1fa3ea
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-1a1fa3ea
],
.nutRotateIn
[
data-v-1a1fa3ea
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-1a1fa3ea
],
.nutRotateOut
[
data-v-1a1fa3ea
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.demo
[
data-v-1a1fa3ea
]
{
padding
:
57px
0
0
!important
}
h4
[
data-v-1a1fa3ea
]
{
margin-left
:
25px
;
margin-top
:
20px
;
font-family
:
PingFangSC-Regular
;
font-size
:
14px
;
color
:
#909ca4
}
.nut-cell
[
data-v-1a1fa3ea
]
{
padding
:
0
}
.nut-cell
[
data-v-1a1fa3ea
]
:after
{
display
:
none
}
.m-b
[
data-v-1a1fa3ea
]
{
margin-bottom
:
60
px
}
3.1.12/demo35.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
4e98de9a
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-4e98de9a
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-4e98de9a
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-4e98de9a
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-4e98de9a
],
.nutFadeIn
[
data-v-4e98de9a
],
.nutFade-leave-active
[
data-v-4e98de9a
],
.nutFadeOut
[
data-v-4e98de9a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-4e98de9a
],
.nutFadeIn
[
data-v-4e98de9a
]
{
-webkit-animation-name
:
nutFadeIn-4e98de9a
;
animation-name
:
nutFadeIn-4e98de9a
}
.nutFade-leave-active
[
data-v-4e98de9a
],
.nutFadeOut
[
data-v-4e98de9a
]
{
-webkit-animation-name
:
nutFadeOut-4e98de9a
;
animation-name
:
nutFadeOut-4e98de9a
}
@-webkit-keyframes
nutZoomIn-4e98de9a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-4e98de9a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-4e98de9a
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-4e98de9a
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-4e98de9a
],
.nutZoomIn
[
data-v-4e98de9a
],
.nutZoom-leave-active
[
data-v-4e98de9a
],
.nutZoomOut
[
data-v-4e98de9a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-4e98de9a
],
.nutZoomIn
[
data-v-4e98de9a
]
{
-webkit-animation-name
:
nutZoomIn-4e98de9a
;
animation-name
:
nutZoomIn-4e98de9a
}
.nutZoom-leave-active
[
data-v-4e98de9a
],
.nutZoomOut
[
data-v-4e98de9a
]
{
-webkit-animation-name
:
nutZoomOut-4e98de9a
;
animation-name
:
nutZoomOut-4e98de9a
}
@-webkit-keyframes
nutEaseIn-4e98de9a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-4e98de9a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-4e98de9a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-4e98de9a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-4e98de9a
],
.nutEaseIn
[
data-v-4e98de9a
],
.nutEase-leave-active
[
data-v-4e98de9a
],
.nutEaseOut
[
data-v-4e98de9a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-4e98de9a
],
.nutEaseIn
[
data-v-4e98de9a
]
{
-webkit-animation-name
:
nutEaseIn-4e98de9a
;
animation-name
:
nutEaseIn-4e98de9a
}
.nutEase-leave-active
[
data-v-4e98de9a
],
.nutEaseOut
[
data-v-4e98de9a
]
{
-webkit-animation-name
:
nutEaseOut-4e98de9a
;
animation-name
:
nutEaseOut-4e98de9a
}
@-webkit-keyframes
nutDropIn-4e98de9a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-4e98de9a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-4e98de9a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-4e98de9a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-4e98de9a
],
.nutDropIn
[
data-v-4e98de9a
],
.nutDrop-leave-active
[
data-v-4e98de9a
],
.nutDropOut
[
data-v-4e98de9a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-4e98de9a
],
.nutDropIn
[
data-v-4e98de9a
]
{
-webkit-animation-name
:
nutDropIn-4e98de9a
;
animation-name
:
nutDropIn-4e98de9a
}
.nutDrop-leave-active
[
data-v-4e98de9a
],
.nutDropOut
[
data-v-4e98de9a
]
{
-webkit-animation-name
:
nutDropOut-4e98de9a
;
animation-name
:
nutDropOut-4e98de9a
}
@-webkit-keyframes
rotation-4e98de9a
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-4e98de9a
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-4e98de9a
],
.nutRotateIn
[
data-v-4e98de9a
],
.nutRotate-leave-active
[
data-v-4e98de9a
],
.nutRotateOut
[
data-v-4e98de9a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-4e98de9a
],
.nutRotateIn
[
data-v-4e98de9a
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-4e98de9a
],
.nutRotateOut
[
data-v-4e98de9a
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.demo
.text-data
[
data-v-4e98de9a
]
{
margin
:
15px
auto
20px
;
padding-left
:
16px
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
;
width
:
100%
;
height
:
46px
;
background
:
white
;
border-radius
:
7px
;
-webkit-box-shadow
:
0px
1px
7px
0px
#edeef1
;
box-shadow
:
0
1px
7px
#edeef1
;
line-height
:
19px
;
font-size
:
13px
;
color
:
#666
}
@-webkit-keyframes
nutFadeIn-
eff9bb5a
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-eff9bb5a
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-eff9bb5a
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-eff9bb5a
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-eff9bb5a
],
.nutFadeIn
[
data-v-eff9bb5a
],
.nutFade-leave-active
[
data-v-eff9bb5a
],
.nutFadeOut
[
data-v-eff9bb5a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-eff9bb5a
],
.nutFadeIn
[
data-v-eff9bb5a
]
{
-webkit-animation-name
:
nutFadeIn-eff9bb5a
;
animation-name
:
nutFadeIn-eff9bb5a
}
.nutFade-leave-active
[
data-v-eff9bb5a
],
.nutFadeOut
[
data-v-eff9bb5a
]
{
-webkit-animation-name
:
nutFadeOut-eff9bb5a
;
animation-name
:
nutFadeOut-eff9bb5a
}
@-webkit-keyframes
nutZoomIn-eff9bb5a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-eff9bb5a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-eff9bb5a
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-eff9bb5a
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-eff9bb5a
],
.nutZoomIn
[
data-v-eff9bb5a
],
.nutZoom-leave-active
[
data-v-eff9bb5a
],
.nutZoomOut
[
data-v-eff9bb5a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-eff9bb5a
],
.nutZoomIn
[
data-v-eff9bb5a
]
{
-webkit-animation-name
:
nutZoomIn-eff9bb5a
;
animation-name
:
nutZoomIn-eff9bb5a
}
.nutZoom-leave-active
[
data-v-eff9bb5a
],
.nutZoomOut
[
data-v-eff9bb5a
]
{
-webkit-animation-name
:
nutZoomOut-eff9bb5a
;
animation-name
:
nutZoomOut-eff9bb5a
}
@-webkit-keyframes
nutEaseIn-eff9bb5a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-eff9bb5a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-eff9bb5a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-eff9bb5a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-eff9bb5a
],
.nutEaseIn
[
data-v-eff9bb5a
],
.nutEase-leave-active
[
data-v-eff9bb5a
],
.nutEaseOut
[
data-v-eff9bb5a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-eff9bb5a
],
.nutEaseIn
[
data-v-eff9bb5a
]
{
-webkit-animation-name
:
nutEaseIn-eff9bb5a
;
animation-name
:
nutEaseIn-eff9bb5a
}
.nutEase-leave-active
[
data-v-eff9bb5a
],
.nutEaseOut
[
data-v-eff9bb5a
]
{
-webkit-animation-name
:
nutEaseOut-eff9bb5a
;
animation-name
:
nutEaseOut-eff9bb5a
}
@-webkit-keyframes
nutDropIn-eff9bb5a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-eff9bb5a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-eff9bb5a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-eff9bb5a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-eff9bb5a
],
.nutDropIn
[
data-v-eff9bb5a
],
.nutDrop-leave-active
[
data-v-eff9bb5a
],
.nutDropOut
[
data-v-eff9bb5a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-eff9bb5a
],
.nutDropIn
[
data-v-eff9bb5a
]
{
-webkit-animation-name
:
nutDropIn-eff9bb5a
;
animation-name
:
nutDropIn-eff9bb5a
}
.nutDrop-leave-active
[
data-v-eff9bb5a
],
.nutDropOut
[
data-v-eff9bb5a
]
{
-webkit-animation-name
:
nutDropOut-eff9bb5a
;
animation-name
:
nutDropOut-eff9bb5a
}
@-webkit-keyframes
rotation-eff9bb5a
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-eff9bb5a
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-eff9bb5a
],
.nutRotateIn
[
data-v-eff9bb5a
],
.nutRotate-leave-active
[
data-v-eff9bb5a
],
.nutRotateOut
[
data-v-eff9bb5a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-eff9bb5a
],
.nutRotateIn
[
data-v-eff9bb5a
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-eff9bb5a
],
.nutRotateOut
[
data-v-eff9bb5a
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.demo
.nut-cell
[
data-v-eff9bb5a
]
{
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
}
.demo
.nut-cell
.nut-cell__value
[
data-v-eff9bb5a
]
{
margin-right
:
8px
}
3.1.12/demo5.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
9b1a0cfa
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-9b1a0cfa
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-9b1a0cfa
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-9b1a0cfa
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-9b1a0cfa
],
.nutFadeIn
[
data-v-9b1a0cfa
],
.nutFade-leave-active
[
data-v-9b1a0cfa
],
.nutFadeOut
[
data-v-9b1a0cfa
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-9b1a0cfa
],
.nutFadeIn
[
data-v-9b1a0cfa
]
{
-webkit-animation-name
:
nutFadeIn-9b1a0cfa
;
animation-name
:
nutFadeIn-9b1a0cfa
}
.nutFade-leave-active
[
data-v-9b1a0cfa
],
.nutFadeOut
[
data-v-9b1a0cfa
]
{
-webkit-animation-name
:
nutFadeOut-9b1a0cfa
;
animation-name
:
nutFadeOut-9b1a0cfa
}
@-webkit-keyframes
nutZoomIn-9b1a0cfa
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-9b1a0cfa
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-9b1a0cfa
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-9b1a0cfa
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-9b1a0cfa
],
.nutZoomIn
[
data-v-9b1a0cfa
],
.nutZoom-leave-active
[
data-v-9b1a0cfa
],
.nutZoomOut
[
data-v-9b1a0cfa
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-9b1a0cfa
],
.nutZoomIn
[
data-v-9b1a0cfa
]
{
-webkit-animation-name
:
nutZoomIn-9b1a0cfa
;
animation-name
:
nutZoomIn-9b1a0cfa
}
.nutZoom-leave-active
[
data-v-9b1a0cfa
],
.nutZoomOut
[
data-v-9b1a0cfa
]
{
-webkit-animation-name
:
nutZoomOut-9b1a0cfa
;
animation-name
:
nutZoomOut-9b1a0cfa
}
@-webkit-keyframes
nutEaseIn-9b1a0cfa
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-9b1a0cfa
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-9b1a0cfa
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-9b1a0cfa
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-9b1a0cfa
],
.nutEaseIn
[
data-v-9b1a0cfa
],
.nutEase-leave-active
[
data-v-9b1a0cfa
],
.nutEaseOut
[
data-v-9b1a0cfa
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-9b1a0cfa
],
.nutEaseIn
[
data-v-9b1a0cfa
]
{
-webkit-animation-name
:
nutEaseIn-9b1a0cfa
;
animation-name
:
nutEaseIn-9b1a0cfa
}
.nutEase-leave-active
[
data-v-9b1a0cfa
],
.nutEaseOut
[
data-v-9b1a0cfa
]
{
-webkit-animation-name
:
nutEaseOut-9b1a0cfa
;
animation-name
:
nutEaseOut-9b1a0cfa
}
@-webkit-keyframes
nutDropIn-9b1a0cfa
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-9b1a0cfa
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-9b1a0cfa
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-9b1a0cfa
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-9b1a0cfa
],
.nutDropIn
[
data-v-9b1a0cfa
],
.nutDrop-leave-active
[
data-v-9b1a0cfa
],
.nutDropOut
[
data-v-9b1a0cfa
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-9b1a0cfa
],
.nutDropIn
[
data-v-9b1a0cfa
]
{
-webkit-animation-name
:
nutDropIn-9b1a0cfa
;
animation-name
:
nutDropIn-9b1a0cfa
}
.nutDrop-leave-active
[
data-v-9b1a0cfa
],
.nutDropOut
[
data-v-9b1a0cfa
]
{
-webkit-animation-name
:
nutDropOut-9b1a0cfa
;
animation-name
:
nutDropOut-9b1a0cfa
}
@-webkit-keyframes
rotation-9b1a0cfa
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-9b1a0cfa
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-9b1a0cfa
],
.nutRotateIn
[
data-v-9b1a0cfa
],
.nutRotate-leave-active
[
data-v-9b1a0cfa
],
.nutRotateOut
[
data-v-9b1a0cfa
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-9b1a0cfa
],
.nutRotateIn
[
data-v-9b1a0cfa
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-9b1a0cfa
],
.nutRotateOut
[
data-v-9b1a0cfa
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.demo__btn
[
data-v-9b1a0cfa
]
{
text-align
:
center
;
width
:
100%
;
height
:
50px
;
border-top
:
1px
solid
#eaf0fb
;
padding-top
:
6px
;
background
:
white
}
.demo__btn
.nut-button
[
data-v-9b1a0cfa
]
{
margin-right
:
10px
}
.demo__piece
[
data-v-9b1a0cfa
]
{
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-box-pack
:
center
;
-ms-flex-pack
:
center
;
justify-content
:
center
;
background
:
white
}
@-webkit-keyframes
nutFadeIn-
c7a3fbe2
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-c7a3fbe2
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-c7a3fbe2
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-c7a3fbe2
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-c7a3fbe2
],
.nutFadeIn
[
data-v-c7a3fbe2
],
.nutFade-leave-active
[
data-v-c7a3fbe2
],
.nutFadeOut
[
data-v-c7a3fbe2
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-c7a3fbe2
],
.nutFadeIn
[
data-v-c7a3fbe2
]
{
-webkit-animation-name
:
nutFadeIn-c7a3fbe2
;
animation-name
:
nutFadeIn-c7a3fbe2
}
.nutFade-leave-active
[
data-v-c7a3fbe2
],
.nutFadeOut
[
data-v-c7a3fbe2
]
{
-webkit-animation-name
:
nutFadeOut-c7a3fbe2
;
animation-name
:
nutFadeOut-c7a3fbe2
}
@-webkit-keyframes
nutZoomIn-c7a3fbe2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-c7a3fbe2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-c7a3fbe2
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-c7a3fbe2
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-c7a3fbe2
],
.nutZoomIn
[
data-v-c7a3fbe2
],
.nutZoom-leave-active
[
data-v-c7a3fbe2
],
.nutZoomOut
[
data-v-c7a3fbe2
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-c7a3fbe2
],
.nutZoomIn
[
data-v-c7a3fbe2
]
{
-webkit-animation-name
:
nutZoomIn-c7a3fbe2
;
animation-name
:
nutZoomIn-c7a3fbe2
}
.nutZoom-leave-active
[
data-v-c7a3fbe2
],
.nutZoomOut
[
data-v-c7a3fbe2
]
{
-webkit-animation-name
:
nutZoomOut-c7a3fbe2
;
animation-name
:
nutZoomOut-c7a3fbe2
}
@-webkit-keyframes
nutEaseIn-c7a3fbe2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-c7a3fbe2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-c7a3fbe2
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-c7a3fbe2
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-c7a3fbe2
],
.nutEaseIn
[
data-v-c7a3fbe2
],
.nutEase-leave-active
[
data-v-c7a3fbe2
],
.nutEaseOut
[
data-v-c7a3fbe2
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-c7a3fbe2
],
.nutEaseIn
[
data-v-c7a3fbe2
]
{
-webkit-animation-name
:
nutEaseIn-c7a3fbe2
;
animation-name
:
nutEaseIn-c7a3fbe2
}
.nutEase-leave-active
[
data-v-c7a3fbe2
],
.nutEaseOut
[
data-v-c7a3fbe2
]
{
-webkit-animation-name
:
nutEaseOut-c7a3fbe2
;
animation-name
:
nutEaseOut-c7a3fbe2
}
@-webkit-keyframes
nutDropIn-c7a3fbe2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-c7a3fbe2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-c7a3fbe2
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-c7a3fbe2
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-c7a3fbe2
],
.nutDropIn
[
data-v-c7a3fbe2
],
.nutDrop-leave-active
[
data-v-c7a3fbe2
],
.nutDropOut
[
data-v-c7a3fbe2
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-c7a3fbe2
],
.nutDropIn
[
data-v-c7a3fbe2
]
{
-webkit-animation-name
:
nutDropIn-c7a3fbe2
;
animation-name
:
nutDropIn-c7a3fbe2
}
.nutDrop-leave-active
[
data-v-c7a3fbe2
],
.nutDropOut
[
data-v-c7a3fbe2
]
{
-webkit-animation-name
:
nutDropOut-c7a3fbe2
;
animation-name
:
nutDropOut-c7a3fbe2
}
@-webkit-keyframes
rotation-c7a3fbe2
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-c7a3fbe2
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-c7a3fbe2
],
.nutRotateIn
[
data-v-c7a3fbe2
],
.nutRotate-leave-active
[
data-v-c7a3fbe2
],
.nutRotateOut
[
data-v-c7a3fbe2
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-c7a3fbe2
],
.nutRotateIn
[
data-v-c7a3fbe2
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-c7a3fbe2
],
.nutRotateOut
[
data-v-c7a3fbe2
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
#app
.demo
[
data-v-c7a3fbe2
]
{
padding
:
57px
0
0
}
.show-demo
[
data-v-c7a3fbe2
]
{
background
:
#ffffff
;
padding
:
0
20px
}
h2
[
data-v-c7a3fbe2
]
{
padding
:
0
20px
}
.btnBtn
[
data-v-c7a3fbe2
]
{
text-align
:
center
}
.btnBtn
.nut-button
[
data-v-c7a3fbe2
]
{
margin-right
:
20px
}
.disabledClick
[
data-v-c7a3fbe2
]
{
pointer-events
:
none
!important
;
cursor
:
not-allowed
!important
;
opacity
:
.6
!important
}
3.1.12/demo6.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
4fc80275
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-4fc80275
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-4fc80275
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-4fc80275
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-4fc80275
],
.nutFadeIn
[
data-v-4fc80275
],
.nutFade-leave-active
[
data-v-4fc80275
],
.nutFadeOut
[
data-v-4fc80275
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-4fc80275
],
.nutFadeIn
[
data-v-4fc80275
]
{
-webkit-animation-name
:
nutFadeIn-4fc80275
;
animation-name
:
nutFadeIn-4fc80275
}
.nutFade-leave-active
[
data-v-4fc80275
],
.nutFadeOut
[
data-v-4fc80275
]
{
-webkit-animation-name
:
nutFadeOut-4fc80275
;
animation-name
:
nutFadeOut-4fc80275
}
@-webkit-keyframes
nutZoomIn-4fc80275
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-4fc80275
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-4fc80275
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-4fc80275
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-4fc80275
],
.nutZoomIn
[
data-v-4fc80275
],
.nutZoom-leave-active
[
data-v-4fc80275
],
.nutZoomOut
[
data-v-4fc80275
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-4fc80275
],
.nutZoomIn
[
data-v-4fc80275
]
{
-webkit-animation-name
:
nutZoomIn-4fc80275
;
animation-name
:
nutZoomIn-4fc80275
}
.nutZoom-leave-active
[
data-v-4fc80275
],
.nutZoomOut
[
data-v-4fc80275
]
{
-webkit-animation-name
:
nutZoomOut-4fc80275
;
animation-name
:
nutZoomOut-4fc80275
}
@-webkit-keyframes
nutEaseIn-4fc80275
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-4fc80275
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-4fc80275
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-4fc80275
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-4fc80275
],
.nutEaseIn
[
data-v-4fc80275
],
.nutEase-leave-active
[
data-v-4fc80275
],
.nutEaseOut
[
data-v-4fc80275
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-4fc80275
],
.nutEaseIn
[
data-v-4fc80275
]
{
-webkit-animation-name
:
nutEaseIn-4fc80275
;
animation-name
:
nutEaseIn-4fc80275
}
.nutEase-leave-active
[
data-v-4fc80275
],
.nutEaseOut
[
data-v-4fc80275
]
{
-webkit-animation-name
:
nutEaseOut-4fc80275
;
animation-name
:
nutEaseOut-4fc80275
}
@-webkit-keyframes
nutDropIn-4fc80275
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-4fc80275
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-4fc80275
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-4fc80275
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-4fc80275
],
.nutDropIn
[
data-v-4fc80275
],
.nutDrop-leave-active
[
data-v-4fc80275
],
.nutDropOut
[
data-v-4fc80275
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-4fc80275
],
.nutDropIn
[
data-v-4fc80275
]
{
-webkit-animation-name
:
nutDropIn-4fc80275
;
animation-name
:
nutDropIn-4fc80275
}
.nutDrop-leave-active
[
data-v-4fc80275
],
.nutDropOut
[
data-v-4fc80275
]
{
-webkit-animation-name
:
nutDropOut-4fc80275
;
animation-name
:
nutDropOut-4fc80275
}
@-webkit-keyframes
rotation-4fc80275
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-4fc80275
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-4fc80275
],
.nutRotateIn
[
data-v-4fc80275
],
.nutRotate-leave-active
[
data-v-4fc80275
],
.nutRotateOut
[
data-v-4fc80275
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-4fc80275
],
.nutRotateIn
[
data-v-4fc80275
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-4fc80275
],
.nutRotateOut
[
data-v-4fc80275
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.countdown-part-box
[
data-v-4fc80275
]
{
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
}
.countdown-part-box
.part-item
[
data-v-4fc80275
]
{
-ms-flex-negative
:
0
;
flex-shrink
:
0
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
;
-webkit-box-pack
:
center
;
-ms-flex-pack
:
center
;
justify-content
:
center
;
width
:
20px
;
height
:
25px
;
background
:
#e8220e
;
color
:
#fff
;
font-size
:
14px
;
border-radius
:
6px
}
.countdown-part-box
.part-item-symbol
[
data-v-4fc80275
]
{
margin
:
0
5
px
}
@-webkit-keyframes
nutFadeIn-
7fc5c86a
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-7fc5c86a
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-7fc5c86a
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-7fc5c86a
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-7fc5c86a
],
.nutFadeIn
[
data-v-7fc5c86a
],
.nutFade-leave-active
[
data-v-7fc5c86a
],
.nutFadeOut
[
data-v-7fc5c86a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-7fc5c86a
],
.nutFadeIn
[
data-v-7fc5c86a
]
{
-webkit-animation-name
:
nutFadeIn-7fc5c86a
;
animation-name
:
nutFadeIn-7fc5c86a
}
.nutFade-leave-active
[
data-v-7fc5c86a
],
.nutFadeOut
[
data-v-7fc5c86a
]
{
-webkit-animation-name
:
nutFadeOut-7fc5c86a
;
animation-name
:
nutFadeOut-7fc5c86a
}
@-webkit-keyframes
nutZoomIn-7fc5c86a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-7fc5c86a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-7fc5c86a
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-7fc5c86a
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-7fc5c86a
],
.nutZoomIn
[
data-v-7fc5c86a
],
.nutZoom-leave-active
[
data-v-7fc5c86a
],
.nutZoomOut
[
data-v-7fc5c86a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-7fc5c86a
],
.nutZoomIn
[
data-v-7fc5c86a
]
{
-webkit-animation-name
:
nutZoomIn-7fc5c86a
;
animation-name
:
nutZoomIn-7fc5c86a
}
.nutZoom-leave-active
[
data-v-7fc5c86a
],
.nutZoomOut
[
data-v-7fc5c86a
]
{
-webkit-animation-name
:
nutZoomOut-7fc5c86a
;
animation-name
:
nutZoomOut-7fc5c86a
}
@-webkit-keyframes
nutEaseIn-7fc5c86a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-7fc5c86a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-7fc5c86a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-7fc5c86a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-7fc5c86a
],
.nutEaseIn
[
data-v-7fc5c86a
],
.nutEase-leave-active
[
data-v-7fc5c86a
],
.nutEaseOut
[
data-v-7fc5c86a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-7fc5c86a
],
.nutEaseIn
[
data-v-7fc5c86a
]
{
-webkit-animation-name
:
nutEaseIn-7fc5c86a
;
animation-name
:
nutEaseIn-7fc5c86a
}
.nutEase-leave-active
[
data-v-7fc5c86a
],
.nutEaseOut
[
data-v-7fc5c86a
]
{
-webkit-animation-name
:
nutEaseOut-7fc5c86a
;
animation-name
:
nutEaseOut-7fc5c86a
}
@-webkit-keyframes
nutDropIn-7fc5c86a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-7fc5c86a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-7fc5c86a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-7fc5c86a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-7fc5c86a
],
.nutDropIn
[
data-v-7fc5c86a
],
.nutDrop-leave-active
[
data-v-7fc5c86a
],
.nutDropOut
[
data-v-7fc5c86a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-7fc5c86a
],
.nutDropIn
[
data-v-7fc5c86a
]
{
-webkit-animation-name
:
nutDropIn-7fc5c86a
;
animation-name
:
nutDropIn-7fc5c86a
}
.nutDrop-leave-active
[
data-v-7fc5c86a
],
.nutDropOut
[
data-v-7fc5c86a
]
{
-webkit-animation-name
:
nutDropOut-7fc5c86a
;
animation-name
:
nutDropOut-7fc5c86a
}
@-webkit-keyframes
rotation-7fc5c86a
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-7fc5c86a
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-7fc5c86a
],
.nutRotateIn
[
data-v-7fc5c86a
],
.nutRotate-leave-active
[
data-v-7fc5c86a
],
.nutRotateOut
[
data-v-7fc5c86a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-7fc5c86a
],
.nutRotateIn
[
data-v-7fc5c86a
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-7fc5c86a
],
.nutRotateOut
[
data-v-7fc5c86a
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.nut-cell
[
data-v-7fc5c86a
],
.nut-barrage
[
data-v-7fc5c86a
]
{
padding
:
20px
0
;
height
:
150px
}
.test
.add
[
data-v-7fc5c86a
]
{
display
:
block
;
padding
:
5px
30px
;
margin
:
20px
auto
;
border-radius
:
15px
;
font-size
:
12
px
}
3.1.12/demo7.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
c7a3fbe2
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-c7a3fbe2
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-c7a3fbe2
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-c7a3fbe2
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-c7a3fbe2
],
.nutFadeIn
[
data-v-c7a3fbe2
],
.nutFade-leave-active
[
data-v-c7a3fbe2
],
.nutFadeOut
[
data-v-c7a3fbe2
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-c7a3fbe2
],
.nutFadeIn
[
data-v-c7a3fbe2
]
{
-webkit-animation-name
:
nutFadeIn-c7a3fbe2
;
animation-name
:
nutFadeIn-c7a3fbe2
}
.nutFade-leave-active
[
data-v-c7a3fbe2
],
.nutFadeOut
[
data-v-c7a3fbe2
]
{
-webkit-animation-name
:
nutFadeOut-c7a3fbe2
;
animation-name
:
nutFadeOut-c7a3fbe2
}
@-webkit-keyframes
nutZoomIn-c7a3fbe2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-c7a3fbe2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-c7a3fbe2
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-c7a3fbe2
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-c7a3fbe2
],
.nutZoomIn
[
data-v-c7a3fbe2
],
.nutZoom-leave-active
[
data-v-c7a3fbe2
],
.nutZoomOut
[
data-v-c7a3fbe2
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-c7a3fbe2
],
.nutZoomIn
[
data-v-c7a3fbe2
]
{
-webkit-animation-name
:
nutZoomIn-c7a3fbe2
;
animation-name
:
nutZoomIn-c7a3fbe2
}
.nutZoom-leave-active
[
data-v-c7a3fbe2
],
.nutZoomOut
[
data-v-c7a3fbe2
]
{
-webkit-animation-name
:
nutZoomOut-c7a3fbe2
;
animation-name
:
nutZoomOut-c7a3fbe2
}
@-webkit-keyframes
nutEaseIn-c7a3fbe2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-c7a3fbe2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-c7a3fbe2
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-c7a3fbe2
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-c7a3fbe2
],
.nutEaseIn
[
data-v-c7a3fbe2
],
.nutEase-leave-active
[
data-v-c7a3fbe2
],
.nutEaseOut
[
data-v-c7a3fbe2
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-c7a3fbe2
],
.nutEaseIn
[
data-v-c7a3fbe2
]
{
-webkit-animation-name
:
nutEaseIn-c7a3fbe2
;
animation-name
:
nutEaseIn-c7a3fbe2
}
.nutEase-leave-active
[
data-v-c7a3fbe2
],
.nutEaseOut
[
data-v-c7a3fbe2
]
{
-webkit-animation-name
:
nutEaseOut-c7a3fbe2
;
animation-name
:
nutEaseOut-c7a3fbe2
}
@-webkit-keyframes
nutDropIn-c7a3fbe2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-c7a3fbe2
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-c7a3fbe2
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-c7a3fbe2
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-c7a3fbe2
],
.nutDropIn
[
data-v-c7a3fbe2
],
.nutDrop-leave-active
[
data-v-c7a3fbe2
],
.nutDropOut
[
data-v-c7a3fbe2
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-c7a3fbe2
],
.nutDropIn
[
data-v-c7a3fbe2
]
{
-webkit-animation-name
:
nutDropIn-c7a3fbe2
;
animation-name
:
nutDropIn-c7a3fbe2
}
.nutDrop-leave-active
[
data-v-c7a3fbe2
],
.nutDropOut
[
data-v-c7a3fbe2
]
{
-webkit-animation-name
:
nutDropOut-c7a3fbe2
;
animation-name
:
nutDropOut-c7a3fbe2
}
@-webkit-keyframes
rotation-c7a3fbe2
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-c7a3fbe2
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-c7a3fbe2
],
.nutRotateIn
[
data-v-c7a3fbe2
],
.nutRotate-leave-active
[
data-v-c7a3fbe2
],
.nutRotateOut
[
data-v-c7a3fbe2
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-c7a3fbe2
],
.nutRotateIn
[
data-v-c7a3fbe2
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-c7a3fbe2
],
.nutRotateOut
[
data-v-c7a3fbe2
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
#app
.demo
[
data-v-c7a3fbe2
]
{
padding
:
57px
0
0
}
.show-demo
[
data-v-c7a3fbe2
]
{
background
:
#ffffff
;
padding
:
0
20px
}
h2
[
data-v-c7a3fbe2
]
{
padding
:
0
20px
}
.btnBtn
[
data-v-c7a3fbe2
]
{
text-align
:
center
}
.btnBtn
.nut-button
[
data-v-c7a3fbe2
]
{
margin-right
:
20px
}
.disabledClick
[
data-v-c7a3fbe2
]
{
pointer-events
:
none
!important
;
cursor
:
not-allowed
!important
;
opacity
:
.6
!important
}
@-webkit-keyframes
nutFadeIn-
40a3637c
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-40a3637c
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-40a3637c
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-40a3637c
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-40a3637c
],
.nutFadeIn
[
data-v-40a3637c
],
.nutFade-leave-active
[
data-v-40a3637c
],
.nutFadeOut
[
data-v-40a3637c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-40a3637c
],
.nutFadeIn
[
data-v-40a3637c
]
{
-webkit-animation-name
:
nutFadeIn-40a3637c
;
animation-name
:
nutFadeIn-40a3637c
}
.nutFade-leave-active
[
data-v-40a3637c
],
.nutFadeOut
[
data-v-40a3637c
]
{
-webkit-animation-name
:
nutFadeOut-40a3637c
;
animation-name
:
nutFadeOut-40a3637c
}
@-webkit-keyframes
nutZoomIn-40a3637c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-40a3637c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-40a3637c
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-40a3637c
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-40a3637c
],
.nutZoomIn
[
data-v-40a3637c
],
.nutZoom-leave-active
[
data-v-40a3637c
],
.nutZoomOut
[
data-v-40a3637c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-40a3637c
],
.nutZoomIn
[
data-v-40a3637c
]
{
-webkit-animation-name
:
nutZoomIn-40a3637c
;
animation-name
:
nutZoomIn-40a3637c
}
.nutZoom-leave-active
[
data-v-40a3637c
],
.nutZoomOut
[
data-v-40a3637c
]
{
-webkit-animation-name
:
nutZoomOut-40a3637c
;
animation-name
:
nutZoomOut-40a3637c
}
@-webkit-keyframes
nutEaseIn-40a3637c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-40a3637c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-40a3637c
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-40a3637c
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-40a3637c
],
.nutEaseIn
[
data-v-40a3637c
],
.nutEase-leave-active
[
data-v-40a3637c
],
.nutEaseOut
[
data-v-40a3637c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-40a3637c
],
.nutEaseIn
[
data-v-40a3637c
]
{
-webkit-animation-name
:
nutEaseIn-40a3637c
;
animation-name
:
nutEaseIn-40a3637c
}
.nutEase-leave-active
[
data-v-40a3637c
],
.nutEaseOut
[
data-v-40a3637c
]
{
-webkit-animation-name
:
nutEaseOut-40a3637c
;
animation-name
:
nutEaseOut-40a3637c
}
@-webkit-keyframes
nutDropIn-40a3637c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-40a3637c
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-40a3637c
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-40a3637c
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-40a3637c
],
.nutDropIn
[
data-v-40a3637c
],
.nutDrop-leave-active
[
data-v-40a3637c
],
.nutDropOut
[
data-v-40a3637c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-40a3637c
],
.nutDropIn
[
data-v-40a3637c
]
{
-webkit-animation-name
:
nutDropIn-40a3637c
;
animation-name
:
nutDropIn-40a3637c
}
.nutDrop-leave-active
[
data-v-40a3637c
],
.nutDropOut
[
data-v-40a3637c
]
{
-webkit-animation-name
:
nutDropOut-40a3637c
;
animation-name
:
nutDropOut-40a3637c
}
@-webkit-keyframes
rotation-40a3637c
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-40a3637c
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-40a3637c
],
.nutRotateIn
[
data-v-40a3637c
],
.nutRotate-leave-active
[
data-v-40a3637c
],
.nutRotateOut
[
data-v-40a3637c
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-40a3637c
],
.nutRotateIn
[
data-v-40a3637c
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-40a3637c
],
.nutRotateOut
[
data-v-40a3637c
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.nut-cell
[
data-v-40a3637c
]
{
-webkit-box-align
:
end
;
-ms-flex-align
:
end
;
align-items
:
flex-end
;
border-radius
:
0
}
.demo-avatar
[
data-v-40a3637c
]
{
color
:
#fff
}
.nut-avatar
[
data-v-40a3637c
]
{
margin-right
:
24px
}
3.1.12/demo8.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-
725c58ea
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-725c58ea
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-725c58ea
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-725c58ea
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-725c58ea
],
.nutFadeIn
[
data-v-725c58ea
],
.nutFade-leave-active
[
data-v-725c58ea
],
.nutFadeOut
[
data-v-725c58ea
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-725c58ea
],
.nutFadeIn
[
data-v-725c58ea
]
{
-webkit-animation-name
:
nutFadeIn-725c58ea
;
animation-name
:
nutFadeIn-725c58ea
}
.nutFade-leave-active
[
data-v-725c58ea
],
.nutFadeOut
[
data-v-725c58ea
]
{
-webkit-animation-name
:
nutFadeOut-725c58ea
;
animation-name
:
nutFadeOut-725c58ea
}
@-webkit-keyframes
nutZoomIn-725c58ea
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-725c58ea
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-725c58ea
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-725c58ea
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-725c58ea
],
.nutZoomIn
[
data-v-725c58ea
],
.nutZoom-leave-active
[
data-v-725c58ea
],
.nutZoomOut
[
data-v-725c58ea
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-725c58ea
],
.nutZoomIn
[
data-v-725c58ea
]
{
-webkit-animation-name
:
nutZoomIn-725c58ea
;
animation-name
:
nutZoomIn-725c58ea
}
.nutZoom-leave-active
[
data-v-725c58ea
],
.nutZoomOut
[
data-v-725c58ea
]
{
-webkit-animation-name
:
nutZoomOut-725c58ea
;
animation-name
:
nutZoomOut-725c58ea
}
@-webkit-keyframes
nutEaseIn-725c58ea
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-725c58ea
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-725c58ea
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-725c58ea
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-725c58ea
],
.nutEaseIn
[
data-v-725c58ea
],
.nutEase-leave-active
[
data-v-725c58ea
],
.nutEaseOut
[
data-v-725c58ea
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-725c58ea
],
.nutEaseIn
[
data-v-725c58ea
]
{
-webkit-animation-name
:
nutEaseIn-725c58ea
;
animation-name
:
nutEaseIn-725c58ea
}
.nutEase-leave-active
[
data-v-725c58ea
],
.nutEaseOut
[
data-v-725c58ea
]
{
-webkit-animation-name
:
nutEaseOut-725c58ea
;
animation-name
:
nutEaseOut-725c58ea
}
@-webkit-keyframes
nutDropIn-725c58ea
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-725c58ea
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-725c58ea
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-725c58ea
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-725c58ea
],
.nutDropIn
[
data-v-725c58ea
],
.nutDrop-leave-active
[
data-v-725c58ea
],
.nutDropOut
[
data-v-725c58ea
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-725c58ea
],
.nutDropIn
[
data-v-725c58ea
]
{
-webkit-animation-name
:
nutDropIn-725c58ea
;
animation-name
:
nutDropIn-725c58ea
}
.nutDrop-leave-active
[
data-v-725c58ea
],
.nutDropOut
[
data-v-725c58ea
]
{
-webkit-animation-name
:
nutDropOut-725c58ea
;
animation-name
:
nutDropOut-725c58ea
}
@-webkit-keyframes
rotation-725c58ea
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-725c58ea
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-725c58ea
],
.nutRotateIn
[
data-v-725c58ea
],
.nutRotate-leave-active
[
data-v-725c58ea
],
.nutRotateOut
[
data-v-725c58ea
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-725c58ea
],
.nutRotateIn
[
data-v-725c58ea
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-725c58ea
],
.nutRotateOut
[
data-v-725c58ea
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.drag-boundary
[
data-v-725c58ea
]
{
position
:
absolute
;
top
:
360px
;
left
:
8px
;
width
:
300px
;
height
:
200px
;
border
:
1px
solid
red
}
@-webkit-keyframes
nutFadeIn-
4e98de9a
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-4e98de9a
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-4e98de9a
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-4e98de9a
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-4e98de9a
],
.nutFadeIn
[
data-v-4e98de9a
],
.nutFade-leave-active
[
data-v-4e98de9a
],
.nutFadeOut
[
data-v-4e98de9a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-4e98de9a
],
.nutFadeIn
[
data-v-4e98de9a
]
{
-webkit-animation-name
:
nutFadeIn-4e98de9a
;
animation-name
:
nutFadeIn-4e98de9a
}
.nutFade-leave-active
[
data-v-4e98de9a
],
.nutFadeOut
[
data-v-4e98de9a
]
{
-webkit-animation-name
:
nutFadeOut-4e98de9a
;
animation-name
:
nutFadeOut-4e98de9a
}
@-webkit-keyframes
nutZoomIn-4e98de9a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-4e98de9a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-4e98de9a
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-4e98de9a
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-4e98de9a
],
.nutZoomIn
[
data-v-4e98de9a
],
.nutZoom-leave-active
[
data-v-4e98de9a
],
.nutZoomOut
[
data-v-4e98de9a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-4e98de9a
],
.nutZoomIn
[
data-v-4e98de9a
]
{
-webkit-animation-name
:
nutZoomIn-4e98de9a
;
animation-name
:
nutZoomIn-4e98de9a
}
.nutZoom-leave-active
[
data-v-4e98de9a
],
.nutZoomOut
[
data-v-4e98de9a
]
{
-webkit-animation-name
:
nutZoomOut-4e98de9a
;
animation-name
:
nutZoomOut-4e98de9a
}
@-webkit-keyframes
nutEaseIn-4e98de9a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-4e98de9a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-4e98de9a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-4e98de9a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-4e98de9a
],
.nutEaseIn
[
data-v-4e98de9a
],
.nutEase-leave-active
[
data-v-4e98de9a
],
.nutEaseOut
[
data-v-4e98de9a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-4e98de9a
],
.nutEaseIn
[
data-v-4e98de9a
]
{
-webkit-animation-name
:
nutEaseIn-4e98de9a
;
animation-name
:
nutEaseIn-4e98de9a
}
.nutEase-leave-active
[
data-v-4e98de9a
],
.nutEaseOut
[
data-v-4e98de9a
]
{
-webkit-animation-name
:
nutEaseOut-4e98de9a
;
animation-name
:
nutEaseOut-4e98de9a
}
@-webkit-keyframes
nutDropIn-4e98de9a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-4e98de9a
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-4e98de9a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-4e98de9a
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-4e98de9a
],
.nutDropIn
[
data-v-4e98de9a
],
.nutDrop-leave-active
[
data-v-4e98de9a
],
.nutDropOut
[
data-v-4e98de9a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-4e98de9a
],
.nutDropIn
[
data-v-4e98de9a
]
{
-webkit-animation-name
:
nutDropIn-4e98de9a
;
animation-name
:
nutDropIn-4e98de9a
}
.nutDrop-leave-active
[
data-v-4e98de9a
],
.nutDropOut
[
data-v-4e98de9a
]
{
-webkit-animation-name
:
nutDropOut-4e98de9a
;
animation-name
:
nutDropOut-4e98de9a
}
@-webkit-keyframes
rotation-4e98de9a
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-4e98de9a
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-4e98de9a
],
.nutRotateIn
[
data-v-4e98de9a
],
.nutRotate-leave-active
[
data-v-4e98de9a
],
.nutRotateOut
[
data-v-4e98de9a
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-4e98de9a
],
.nutRotateIn
[
data-v-4e98de9a
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-4e98de9a
],
.nutRotateOut
[
data-v-4e98de9a
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.demo
.text-data
[
data-v-4e98de9a
]
{
margin
:
15px
auto
20px
;
padding-left
:
16px
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
;
width
:
100%
;
height
:
46px
;
background
:
white
;
border-radius
:
7px
;
-webkit-box-shadow
:
0px
1px
7px
0px
#edeef1
;
box-shadow
:
0
1px
7px
#edeef1
;
line-height
:
19px
;
font-size
:
13px
;
color
:
#666
}
3.1.12/demo9.css
浏览文件 @
984f2b0f
@-webkit-keyframes
nutFadeIn-4
5de8da5
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-45de8da5
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-45de8da5
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-45de8da5
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-45de8da5
],
.nutFadeIn
[
data-v-45de8da5
],
.nutFade-leave-active
[
data-v-45de8da5
],
.nutFadeOut
[
data-v-45de8da5
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-45de8da5
],
.nutFadeIn
[
data-v-45de8da5
]
{
-webkit-animation-name
:
nutFadeIn-45de8da5
;
animation-name
:
nutFadeIn-45de8da5
}
.nutFade-leave-active
[
data-v-45de8da5
],
.nutFadeOut
[
data-v-45de8da5
]
{
-webkit-animation-name
:
nutFadeOut-45de8da5
;
animation-name
:
nutFadeOut-45de8da5
}
@-webkit-keyframes
nutZoomIn-45de8da5
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-45de8da5
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-45de8da5
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-45de8da5
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-45de8da5
],
.nutZoomIn
[
data-v-45de8da5
],
.nutZoom-leave-active
[
data-v-45de8da5
],
.nutZoomOut
[
data-v-45de8da5
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-45de8da5
],
.nutZoomIn
[
data-v-45de8da5
]
{
-webkit-animation-name
:
nutZoomIn-45de8da5
;
animation-name
:
nutZoomIn-45de8da5
}
.nutZoom-leave-active
[
data-v-45de8da5
],
.nutZoomOut
[
data-v-45de8da5
]
{
-webkit-animation-name
:
nutZoomOut-45de8da5
;
animation-name
:
nutZoomOut-45de8da5
}
@-webkit-keyframes
nutEaseIn-45de8da5
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-45de8da5
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-45de8da5
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-45de8da5
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-45de8da5
],
.nutEaseIn
[
data-v-45de8da5
],
.nutEase-leave-active
[
data-v-45de8da5
],
.nutEaseOut
[
data-v-45de8da5
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-45de8da5
],
.nutEaseIn
[
data-v-45de8da5
]
{
-webkit-animation-name
:
nutEaseIn-45de8da5
;
animation-name
:
nutEaseIn-45de8da5
}
.nutEase-leave-active
[
data-v-45de8da5
],
.nutEaseOut
[
data-v-45de8da5
]
{
-webkit-animation-name
:
nutEaseOut-45de8da5
;
animation-name
:
nutEaseOut-45de8da5
}
@-webkit-keyframes
nutDropIn-45de8da5
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-45de8da5
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-45de8da5
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-45de8da5
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-45de8da5
],
.nutDropIn
[
data-v-45de8da5
],
.nutDrop-leave-active
[
data-v-45de8da5
],
.nutDropOut
[
data-v-45de8da5
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-45de8da5
],
.nutDropIn
[
data-v-45de8da5
]
{
-webkit-animation-name
:
nutDropIn-45de8da5
;
animation-name
:
nutDropIn-45de8da5
}
.nutDrop-leave-active
[
data-v-45de8da5
],
.nutDropOut
[
data-v-45de8da5
]
{
-webkit-animation-name
:
nutDropOut-45de8da5
;
animation-name
:
nutDropOut-45de8da5
}
@-webkit-keyframes
rotation-45de8da5
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-45de8da5
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-45de8da5
],
.nutRotateIn
[
data-v-45de8da5
],
.nutRotate-leave-active
[
data-v-45de8da5
],
.nutRotateOut
[
data-v-45de8da5
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-45de8da5
],
.nutRotateIn
[
data-v-45de8da5
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-45de8da5
],
.nutRotateOut
[
data-v-45de8da5
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.demo
[
data-v-45de8da5
]
{
background-color
:
#fff
!important
}
@-webkit-keyframes
nutFadeIn-4
fc80275
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@keyframes
nutFadeIn-4fc80275
{
0
%
{
opacity
:
0
}
to
{
opacity
:
1
}}
@-webkit-keyframes
nutFadeOut-4fc80275
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
@keyframes
nutFadeOut-4fc80275
{
0
%
{
opacity
:
1
}
to
{
opacity
:
0
}}
.nutFade-enter-active
[
data-v-4fc80275
],
.nutFadeIn
[
data-v-4fc80275
],
.nutFade-leave-active
[
data-v-4fc80275
],
.nutFadeOut
[
data-v-4fc80275
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutFade-enter-active
[
data-v-4fc80275
],
.nutFadeIn
[
data-v-4fc80275
]
{
-webkit-animation-name
:
nutFadeIn-4fc80275
;
animation-name
:
nutFadeIn-4fc80275
}
.nutFade-leave-active
[
data-v-4fc80275
],
.nutFadeOut
[
data-v-4fc80275
]
{
-webkit-animation-name
:
nutFadeOut-4fc80275
;
animation-name
:
nutFadeOut-4fc80275
}
@-webkit-keyframes
nutZoomIn-4fc80275
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@keyframes
nutZoomIn-4fc80275
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
50
%
{
opacity
:
1
}}
@-webkit-keyframes
nutZoomOut-4fc80275
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
@keyframes
nutZoomOut-4fc80275
{
0
%
{
opacity
:
1
}
50
%
{
opacity
:
0
;
-webkit-transform
:
scale3d
(
.3
,
.3
,
.3
);
transform
:
scale3d
(
.3
,
.3
,
.3
)}
to
{
opacity
:
0
}}
.nutZoom-enter-active
[
data-v-4fc80275
],
.nutZoomIn
[
data-v-4fc80275
],
.nutZoom-leave-active
[
data-v-4fc80275
],
.nutZoomOut
[
data-v-4fc80275
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutZoom-enter-active
[
data-v-4fc80275
],
.nutZoomIn
[
data-v-4fc80275
]
{
-webkit-animation-name
:
nutZoomIn-4fc80275
;
animation-name
:
nutZoomIn-4fc80275
}
.nutZoom-leave-active
[
data-v-4fc80275
],
.nutZoomOut
[
data-v-4fc80275
]
{
-webkit-animation-name
:
nutZoomOut-4fc80275
;
animation-name
:
nutZoomOut-4fc80275
}
@-webkit-keyframes
nutEaseIn-4fc80275
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@keyframes
nutEaseIn-4fc80275
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}
to
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}}
@-webkit-keyframes
nutEaseOut-4fc80275
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
@keyframes
nutEaseOut-4fc80275
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scale
(
.9
);
transform
:
scale
(
.9
)}}
.nutEase-enter-active
[
data-v-4fc80275
],
.nutEaseIn
[
data-v-4fc80275
],
.nutEase-leave-active
[
data-v-4fc80275
],
.nutEaseOut
[
data-v-4fc80275
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutEase-enter-active
[
data-v-4fc80275
],
.nutEaseIn
[
data-v-4fc80275
]
{
-webkit-animation-name
:
nutEaseIn-4fc80275
;
animation-name
:
nutEaseIn-4fc80275
}
.nutEase-leave-active
[
data-v-4fc80275
],
.nutEaseOut
[
data-v-4fc80275
]
{
-webkit-animation-name
:
nutEaseOut-4fc80275
;
animation-name
:
nutEaseOut-4fc80275
}
@-webkit-keyframes
nutDropIn-4fc80275
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@keyframes
nutDropIn-4fc80275
{
0
%
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}
to
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}}
@-webkit-keyframes
nutDropOut-4fc80275
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
@keyframes
nutDropOut-4fc80275
{
0
%
{
opacity
:
1
;
-webkit-transform
:
scaleY
(
1
);
transform
:
scaleY
(
1
)}
to
{
opacity
:
0
;
-webkit-transform
:
scaleY
(
.8
);
transform
:
scaleY
(
.8
)}}
.nutDrop-enter-active
[
data-v-4fc80275
],
.nutDropIn
[
data-v-4fc80275
],
.nutDrop-leave-active
[
data-v-4fc80275
],
.nutDropOut
[
data-v-4fc80275
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutDrop-enter-active
[
data-v-4fc80275
],
.nutDropIn
[
data-v-4fc80275
]
{
-webkit-animation-name
:
nutDropIn-4fc80275
;
animation-name
:
nutDropIn-4fc80275
}
.nutDrop-leave-active
[
data-v-4fc80275
],
.nutDropOut
[
data-v-4fc80275
]
{
-webkit-animation-name
:
nutDropOut-4fc80275
;
animation-name
:
nutDropOut-4fc80275
}
@-webkit-keyframes
rotation-4fc80275
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
@keyframes
rotation-4fc80275
{
0
%
{
-webkit-transform
:
rotate
(
0deg
)}
to
{
-webkit-transform
:
rotate
(
360deg
)}}
.nutRotate-enter-active
[
data-v-4fc80275
],
.nutRotateIn
[
data-v-4fc80275
],
.nutRotate-leave-active
[
data-v-4fc80275
],
.nutRotateOut
[
data-v-4fc80275
]
{
-webkit-animation-duration
:
.25s
;
animation-duration
:
.25s
;
-webkit-animation-fill-mode
:
both
;
animation-fill-mode
:
both
;
-webkit-animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
);
animation-timing-function
:
cubic-bezier
(
.55
,
.085
,
.68
,
.53
)}
.nutRotate-enter-active
[
data-v-4fc80275
],
.nutRotateIn
[
data-v-4fc80275
]
{
-webkit-animation-name
:
nutRotateIn
;
animation-name
:
nutRotateIn
}
.nutRotate-leave-active
[
data-v-4fc80275
],
.nutRotateOut
[
data-v-4fc80275
]
{
-webkit-animation-name
:
nutRotateOut
;
animation-name
:
nutRotateOut
}
.countdown-part-box
[
data-v-4fc80275
]
{
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
}
.countdown-part-box
.part-item
[
data-v-4fc80275
]
{
-ms-flex-negative
:
0
;
flex-shrink
:
0
;
display
:
-webkit-box
;
display
:
-ms-flexbox
;
display
:
flex
;
-webkit-box-align
:
center
;
-ms-flex-align
:
center
;
align-items
:
center
;
-webkit-box-pack
:
center
;
-ms-flex-pack
:
center
;
justify-content
:
center
;
width
:
20px
;
height
:
25px
;
background
:
#e8220e
;
color
:
#fff
;
font-size
:
14px
;
border-radius
:
6px
}
.countdown-part-box
.part-item-symbol
[
data-v-4fc80275
]
{
margin
:
0
5px
}
3.1.12/mobile.js
浏览文件 @
984f2b0f
此差异已折叠。
点击以展开。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑！
取消
想要评论请
注册
或
登录
