一. 动画
1. 过度样式
(1). 缩放过渡动画 scale-transition
<template>
<div>
<v-container grid-list-xs>
<div class="text-center mb-4">
<v-btn color="primary" @click="alert = !alert"> Toggle </v-btn>
</div>
<v-alert
:value="alert"
color="pink"
dark
icon="mdi-fingerprint"
transition="scale-transition"
>
<p>
猎鹰9号（Falcon 9）火箭是美国SpaceX公司研制的可回收式中型运载火箭。
</p>
<p>猎鹰9号于2010年6月4日完成首次发射，于2015年12月21日完成首次回收。</p>
<p>
美国东部时间2021年4月23日5时49分，SpaceX载人龙飞船搭乘猎鹰9号火箭从佛罗里达州肯尼迪航天中心发射升空，执行商业载人航天任务Crew-2，送4名宇航员前往国际空间站，开展为期6个月的任务。飞船计划于4月24日5时10分对接空间站。
</p>
</v-alert>
</v-container>
</div>
</template>
<script>
export default {
data() {
return { alert: true };
},
};
</script>
(2). fab过渡动画 fab-transition
transition="fab-transition"
(3). 淡入淡出 fade-transition
transition="fade-transition"
(4). X轴滚动
transition="scroll-x-transition"
(5). X轴反向滚动
transition="scroll-x-reverse-transition"
(6). Y轴滚动
transition="scroll-y-transition"
(7). Y轴反向滚动
transition="scroll-y-reverse-transition"
(8). X轴滑动
滑动和滚动感觉上没有太大差别, 除了方向稍微不同
transition="slide-x-transition"
(9). X轴反向滑动
transition="slide-x-reverse-transition"
(10). Y轴滑动
transition="slide-x-transition"
(11). Y轴反向滑动
transition="slide-y-reverse-transition"
二. 弹性布局
使用响应的flexbox实用程序通过对齐、排列等方式控制flex容器的布局, 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
1. 启用flexbox
你可以将任何元素转换为 flexbox 容器并将该元素的 子元素 转成 flex 元素.
<template>
<div class="ma-4">
<div class="d-flex flex-wrap text-center">
<v-sheet
color="green white--text"
outlined
min-width="200"
v-for="n in 24"
:key="n"
class="ma-1"
>
DNA的第{{ n }}本生命之书
</v-sheet>
</div>
</div>
</template>
2. 基于断点的flex
d-flex
d-inline-flex
d-sm-flex
d-sm-inline-flex
d-md-flex
d-md-inline-flex
d-lg-flex
d-lg-inline-flex
d-xl-flex
d-xl-inline-flex
3. flex对齐轴方向
flex-row (默认) 行对齐
flex-row-reverse 行反向对齐
flex-column 列对齐
flex-column-reverse 列反向对齐
如: 行反向对齐
<v-row class="d-flex flex-row-reverse text-center">
如: 列对齐
IE11 和 Safari 可能存在列方向的问题
<v-row class="d-flex flex-column text-center">
如: 列反向对齐
IE11 和 Safari 可能存在列方向的问题
<v-row class="d-flex flex-column-reverse text-center">
当然行列对齐也有断点
.flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse
4. 横轴对齐子类justify
Flex 横轴对齐的子类 justify子类, 默认情况下修改控制x轴上的flex项目
.justify-start 顶头
.justify-end 顶尾
.justify-center 居中
.justify-space-between 间隔均分
.justify-space-around 间隔环绕
.justify-sm-start
.justify-sm-end
.justify-sm-center
.justify-sm-space-between
.justify-sm-space-around
.justify-md-start
.justify-md-end
.justify-md-center
.justify-md-space-between
.justify-md-space-around
.justify-lg-start
.justify-lg-end
.justify-lg-center
.justify-lg-space-between
.justify-lg-space-around
.justify-xl-start
.justify-xl-end
.justify-xl-center
.justify-xl-space-between
.justify-xl-space-around
5. 纵轴对齐子类align
Flex 纵轴对齐的子类 align子类, 默认情况下修改控制y轴上的flex项目
.align-start 顶头
.align-end 顶尾
.align-center 居中
.align-baseline 基准线
.align-stretch 浏览器默认
.align-sm-start
.align-sm-end
.align-sm-center
.align-sm-baseline
.align-sm-stretch
.align-md-start
.align-md-end
.align-md-center
.align-md-baseline
.align-md-stretch
.align-lg-start
.align-lg-end
.align-lg-center
.align-lg-baseline
.align-lg-stretch
.align-xl-start
.align-xl-end
.align-xl-center
.align-xl-baseline
.align-xl-stretch
6. 堆叠方式
.flex-nowrap 不换行
.flex-wrap 换行(默认)
.flex-wrap-reverse 反向换行
flex-nowrap
flex-wrap
flex-wrap-reverse
.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-reverse
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse
7. 自身对齐 (应用在flex item上)
Flex 纵轴对齐的子类 align-self子类, 默认情况下修改控制x轴上的flex项目
.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-auto
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-auto
.align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-auto
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-auto
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-auto
.align-self-xl-stretch
8. 自动边距 (应用在flex item上)
-
mr-auto: 右侧自动边距
<template>
<div class="ma-4">
<v-row class="d-flex">
<v-sheet
color="green white--text"
outlined
width="200"
height="100"
v-for="n in 24"
:key="n"
class="ma-1 mr-auto"
>
DNA的第{{ n }}本生命之书
</v-sheet>
</v-row>
</div>
</template>
-
ml-auto: 左侧自动边距
<template>
<div class="ma-4">
<v-row class="d-flex">
<v-sheet
color="green white--text"
outlined
width="200"
height="100"
v-for="n in 24"
:key="n"
class="ma-1 ml-auto"
>
DNA的第{{ n }}本生命之书
</v-sheet>
</v-row>
</div>
</template>
9. 自定义排序
<template>
<div class="ma-4">
<v-row class="d-flex">
<v-sheet dark min-width="200" class="ma-1 order-2"> DNA的第1本生命之书 </v-sheet>
<v-sheet dark min-width="200" class="ma-1 order-0"> DNA的第2本生命之书 </v-sheet>
<v-sheet dark min-width="200" class="ma-1 order-1"> DNA的第3本生命之书 </v-sheet>
</v-row>
</div>
</template>
