内置样式
1px 边框
为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。
<!-- 上边框 -->
<div class="fs-1px-top"></div>
<!-- 下边框 -->
<div class="fs-1px-bottom"></div>
<!-- 左边框 -->
<div class="fs-1px-left"></div>
<!-- 右边框 -->
<div class="fs-1px-right"></div>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
transition 动画
可以通过 transition 组件的name属性使用内置的动画
<!-- dropdown 动画 -->
<transition name="drop-fade">
<div v-show="visible">Drop-Fade</div>
</transition>
<!-- 透明度动画 -->
<transition name="fade">
<div v-show="visible">Fade</div>
</transition>
<!-- 缩放动画 -->
<transition name="bounce">
<div v-show="visible">Bounce</div>
</transition>
<!-- 从上划入动画 -->
<transition name="top">
<div v-show="visible">Top</div>
</transition>
<!-- 从下划入动画 -->
<transition name="bottom">
<div v-show="visible">Bottom</div>
</transition>
<!-- 从右划入动画 -->
<transition name="right">
<div v-show="visible">Right</div>
</transition>
<!-- 从左划入动画 -->
<transition name="left">
<div v-show="visible">Left</div>
</transition>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
css帧动画
<!-- 旋转动画 -->
animation: fsRotate .3s linear;
1
2
2