Skip to content

Commit 0c59f79

Browse files
kouchaokouchao
committed
新增 动画demo
1 parent 1ca2612 commit 0c59f79

File tree

4 files changed

+116
-4
lines changed

4 files changed

+116
-4
lines changed

‎src/App.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
</lay-menu>
4646
</lay-header>
4747
<lay-side>
48-
<lay-menu :default-openeds="[0]">
48+
<lay-menu :default-openeds="[0, 1, 2]">
4949
<lay-menu-item :index="0">
5050
<template slot="title">
5151
<span>快速开始</span>
@@ -58,7 +58,7 @@
5858
<span>布局</span>
5959
</template>
6060
<lay-menu-child-item title="栅格" :to="{name: 'grid'}"></lay-menu-child-item>
61-
<lay-menu-child-item title="后台布局"></lay-menu-child-item>
61+
<lay-menu-child-item title="后台布局" :to="{name: 'admin'}"></lay-menu-child-item>
6262

6363
</lay-menu-item>
6464
<lay-menu-item :index="2">
@@ -73,9 +73,9 @@
7373
<lay-menu-child-item title="面板" :to="{name: 'panel'}"></lay-menu-child-item>
7474
<lay-menu-child-item title="徽章" :to="{name: 'badge'}"></lay-menu-child-item>
7575
<lay-menu-child-item title="时间线" :to="{name: 'timeline'}"></lay-menu-child-item>
76-
<lay-menu-child-item title="辅助元素" :to="{name: 'auxiliar'}"></lay-menu-child-item>
7776
<lay-menu-child-item title="静态表格" :to="{name: 'table'}"></lay-menu-child-item>
78-
77+
<lay-menu-child-item title="动画" :to="{name: 'animation'}"></lay-menu-child-item>
78+
<lay-menu-child-item title="辅助元素" :to="{name: 'auxiliar'}"></lay-menu-child-item>
7979
</lay-menu-item>
8080
</lay-menu>
8181
</lay-side>

‎src/router.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import Panel from './views/Panel.vue'
1313
import Timeline from './views/Timeline.vue'
1414
import Table from './views/Table.vue'
1515
import Tabs from './views/Tabs.vue'
16+
import Animation from './views/Animation.vue'
17+
import Admin from './views/Admin.vue'
1618

1719
Vue.use(Router)
1820

@@ -82,6 +84,16 @@ export default new Router({
8284
path: '/tabs',
8385
name: 'tabs',
8486
component: Tabs
87+
},
88+
{
89+
path: '/animation',
90+
name: 'animation',
91+
component: Animation
92+
},
93+
{
94+
path: '/admin',
95+
name: 'admin',
96+
component: Admin
8597
}
8698

8799

‎src/views/Admin.vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<div>
3+
<lay-block>
4+
这就是！！！
5+
</lay-block>
6+
</div>
7+
</template>
8+
9+
<script>
10+
export default {
11+
name: "Admin"
12+
}
13+
</script>
14+
15+
<style scoped>
16+
17+
</style>

‎src/views/Animation.vue‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<template>
2+
<div>
3+
<lay-block>
4+
展示采用layui默认样式，实际应用也可以参照 <a href="https://cn.vuejs.org/v2/api/#transition">transition 组件文档 </a>
5+
</lay-block>
6+
<div style="text-align: center; margin-top: 50px;">
7+
<div class="layui-anim" :class="demo.name">
8+
{{demo.title}}
9+
</div>
10+
<div class="code">{{demo.name}}</div>
11+
<div style="margin-top: 50px;">
12+
<lay-button v-for="item in classNames" @click="handlerClick(item)">{{item.title}}</lay-button>
13+
</div>
14+
15+
</div>
16+
17+
18+
</div>
19+
</template>
20+
21+
<script>
22+
export default {
23+
name: "Animation",
24+
data() {
25+
return {
26+
demo: {
27+
name: 'demo',
28+
title: '点击按钮展示',
29+
},
30+
31+
classNames: [{
32+
name: 'layui-anim-up',
33+
title: '从最底部往上滑入'
34+
}, {
35+
name: 'layui-anim-upbit',
36+
title: '微微往上滑入'
37+
}, {
38+
name: 'layui-anim-scale',
39+
title: '平滑放大'
40+
}, {
41+
name: 'layui-anim-scaleSpring',
42+
title: '弹簧式放大'
43+
}, {
44+
name: 'layui-anim-fadein',
45+
title: '渐现'
46+
}, {
47+
name: 'layui-anim-fadeout',
48+
title: '渐隐'
49+
}, {
50+
name: 'layui-anim-rotate',
51+
title: '360度旋转'
52+
}, {
53+
name: 'layui-anim-rotate layui-anim-loop',
54+
title: '循环动画'
55+
}]
56+
}
57+
},
58+
methods: {
59+
handlerClick(item){
60+
61+
this.demo = item
62+
}
63+
}
64+
}
65+
</script>
66+
67+
<style scoped>
68+
69+
70+
.layui-anim {
71+
width: 150px;
72+
height: 150px;
73+
line-height: 150px;
74+
margin: 0 auto 10px;
75+
text-align: center;
76+
background-color: #009688;
77+
cursor: pointer;
78+
color: #fff;
79+
border-radius: 50%;
80+
}
81+
82+
83+
</style>

0 commit comments

Comments
 (0)