过渡效果

流畅的动画有助于给用户界面带来很棒的感觉。使用 Vue 的过渡系统和可复用的功能组件，你可以轻松地控制应用程序的动画效果。大多数组件可以通过 transition 属性来改变他们的过渡效果。

用例

Vuetify 附带了 10 多个自定义 css 动画，可应用于众多组件或你自己的自定义的组件。

template

  1. <template>
  2.   <v-row justify="center">
  3.     <v-menu transition="slide-x-transition">
  4.       <template v-slot:activator="{ on }">
  5.         <v-btn color="primary" class="ma-2" v-on="on">
  6.           Slide X Transition
  7.         </v-btn>
  8.       </template>
  9.       <v-list>
  10.         <v-list-item
  11.           v-for="n in 5"
  12.           :key="n"
  13.           link
  14.         >
  15.           <v-list-item-title v-text="'Item ' + n"></v-list-item-title>
  16.         </v-list-item>
  17.       </v-list>
  18.     </v-menu>
  20.     <div class="mx-6 hidden-sm-and-down"></div>
  22.     <v-menu transition="scroll-y-transition">
  23.       <template v-slot:activator="{ on }">
  24.         <v-btn color="secondary" class="ma-2" v-on="on">
  25.           Scroll Y Transition
  26.         </v-btn>
  27.       </template>
  28.       <v-list>
  29.         <v-list-item
  30.           v-for="n in 5"
  31.           :key="n"
  32.           link
  33.         >
  34.           <v-list-item-title v-text="'Item ' + n"></v-list-item-title>
  35.         </v-list-item>
  36.       </v-list>
  37.     </v-menu>
  38.   </v-row>
  39. </template>

Transitions（过渡动画） - 图1

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

Transitions（过渡动画） - 图2

示例

下面是一些简单到复杂的例子。

X 轴滑动过渡

X 轴滑动过渡可沿水平方向移动。

template

  1. <template>
  2.   <v-row
  3.     justify="center"
  4.   >
  5.     <v-menu transition="slide-x-transition">
  6.       <template v-slot:activator="{ on }">
  7.         <v-btn color="primary" class="ma-2" v-on="on">
  8.           Slide X Transition
  9.         </v-btn>
  10.       </template>
  11.       <v-list>
  12.         <v-list-item v-for="n in 5" :key="n" link>
  13.           <v-list-item-title v-text="'Item ' + n"></v-list-item-title>
  14.         </v-list-item>
  15.       </v-list>
  16.     </v-menu>
  18.     <div class="mx-4 hidden-sm-and-down"></div>
  20.     <v-menu transition="slide-x-reverse-transition">
  21.       <template v-slot:activator="{ on }">
  22.         <v-btn color="secondary" class="ma-2" v-on="on">
  23.           Slide X Reverse Transition
  24.         </v-btn>
  25.       </template>
  26.       <v-list>
  27.         <v-list-item v-for="n in 5" :key="n" link>
  28.           <v-list-item-title v-text="'Item ' + n"></v-list-item-title>
  29.         </v-list-item>
  30.       </v-list>
  31.     </v-menu>
  32.   </v-row>
  33. </template>

Transitions（过渡动画） - 图3

Y 轴滑动过渡

动画使用应用程序的 $primary-transition。

template

  1. <template>
  2.   <v-row
  3.     justify="center"
  4.   >
  5.     <v-menu transition="slide-y-transition">
  6.       <template v-slot:activator="{ on }">
  7.         <v-btn color="primary" class="ma-2" v-on="on">
  8.           Slide Y Transition
  9.         </v-btn>
  10.       </template>
  11.       <v-list>
  12.         <v-list-item v-for="n in 5" :key="n" link>
  13.           <v-list-item-title v-text="'Item ' + n"></v-list-item-title>
  14.         </v-list-item>
  15.       </v-list>
  16.     </v-menu>
  18.     <div class="mx-4 hidden-sm-and-down"></div>
  20.     <v-menu transition="slide-y-reverse-transition">
  21.       <template v-slot:activator="{ on }">
  22.         <v-btn color="secondary" class="ma-2" v-on="on">
  23.           Slide Y Reverse Transition
  24.         </v-btn>
  25.       </template>
  26.       <v-list>
  27.         <v-list-item v-for="n in 5" :key="n" link>
  28.           <v-list-item-title v-text="'Item ' + n"></v-list-item-title>
  29.         </v-list-item>
  30.       </v-list>
  31.     </v-menu>
  32.   </v-row>
  33. </template>

Transitions（过渡动画） - 图4

X 轴滚动过渡

X 轴滚动过渡沿着水平轴继续。

template

  1. <template>
  2.   <v-row
  3.     justify="center"
  4.   >
  5.     <v-menu transition="scroll-x-transition">
  6.       <template v-slot:activator="{ on }">
  7.         <v-btn color="primary" class="ma-2" v-on="on">
  8.           Scroll X Transition
  9.         </v-btn>
  10.       </template>
  11.       <v-list>
  12.         <v-list-item v-for="n in 5" :key="n" link>
  13.           <v-list-item-title v-text="'Item ' + n"></v-list-item-title>
  14.         </v-list-item>
  15.       </v-list>
  16.     </v-menu>
  18.     <div class="mx-4 hidden-sm-and-down"></div>
  20.     <v-menu transition="scroll-x-reverse-transition">
  21.       <template v-slot:activator="{ on }">
  22.         <v-btn color="secondary" class="ma-2" v-on="on">
  23.           Scroll X Reverse Transition
  24.         </v-btn>
  25.       </template>
  26.       <v-list>
  27.         <v-list-item v-for="n in 5" :key="n" link>
  28.           <v-list-item-title v-text="'Item ' + n"></v-list-item-title>
  29.         </v-list-item>
  30.       </v-list>
  31.     </v-menu>
  32.   </v-row>
  33. </template>

Transitions（过渡动画） - 图5

Y 轴滚动过渡

Y 轴滚动过渡沿着垂直轴继续。

template

  1. <template>
  2.   <v-row
  3.     justify="center"
  4.   >
  5.     <v-menu transition="scroll-y-transition">
  6.       <template v-slot:activator="{ on }">
  7.         <v-btn color="primary" class="ma-2" v-on="on">
  8.           Scroll Y Transition
  9.         </v-btn>
  10.       </template>
  11.       <v-list>
  12.         <v-list-item v-for="n in 5" :key="n" link>
  13.           <v-list-item-title v-text="'Item ' + n"></v-list-item-title>
  14.         </v-list-item>
  15.       </v-list>
  16.     </v-menu>
  18.     <div class="mx-4 hidden-sm-and-down"></div>
  20.     <v-menu transition="scroll-y-reverse-transition">
  21.       <template v-slot:activator="{ on }">
  22.         <v-btn color="secondary" class="ma-2" v-on="on">
  23.           Scroll Y Reverse Transition
  24.         </v-btn>
  25.       </template>
  26.       <v-list>
  27.         <v-list-item v-for="n in 5" :key="n" link>
  28.           <v-list-item-title v-text="'Item ' + n"></v-list-item-title>
  29.         </v-list-item>
  30.       </v-list>
  31.     </v-menu>
  32.   </v-row>
  33. </template>

Transitions（过渡动画） - 图6

缩放过渡

许多 Vuetify 组件都包含一个 transition 属性允许你指定想要的效果。

template

  1. <template>
  2.   <div class="text-center">
  3.     <v-menu transition="scale-transition">
  4.       <template v-slot:activator="{ on }">
  5.         <v-btn
  6.           dark
  7.           color="primary"
  8.           v-on="on"
  9.         >
  10.           Scale Transition
  11.         </v-btn>
  12.       </template>
  13.       <v-list>
  14.         <v-list-item v-for="n in 5" :key="n" @click="">
  15.           <v-list-item-title v-text="'Item ' + n"></v-list-item-title>
  16.         </v-list-item>
  17.       </v-list>
  18.     </v-menu>
  19.   </div>
  20. </template>

Transitions（过渡动画） - 图7

Charcoal Vuetify Beanie

Stay warm with the new Premium Knit Vuetify Beanie available in black, navy and charcoal.

ads by Vuetify

](https://store.vuetifyjs.com/product/premium-charcoal-vuetify-beanie?ref=vuetifyjs.com)

Fab 过渡

在 v-speed-dial 组件中可以找到动画过渡的例子。

template

  1. <template>
  2.   <div class="text-center">
  3.     <v-menu transition="fab-transition">
  4.       <template v-slot:activator="{ on }">
  5.         <v-btn
  6.           dark
  7.           color="primary"
  8.           v-on="on"
  9.         >
  10.           Fab Transition
  11.         </v-btn>
  12.       </template>
  13.       <v-list>
  14.         <v-list-item v-for="n in 5" :key="n" @click="">
  15.           <v-list-item-title v-text="'Item ' + n"></v-list-item-title>
  16.         </v-list-item>
  17.       </v-list>
  18.     </v-menu>
  19.   </div>
  20. </template>

Transitions（过渡动画） - 图8

淡入淡出过渡

在 Carousel 组件上可以找到淡入淡出的过渡示例。

template

  1. <template>
  2.   <div class="text-center">
  3.     <v-menu transition="fade-transition">
  4.       <template v-slot:activator="{ on }">
  5.         <v-btn
  6.           dark
  7.           color="primary"
  8.           v-on="on"
  9.         >
  10.           Fade Transition
  11.         </v-btn>
  12.       </template>
  13.       <v-list>
  14.         <v-list-item v-for="n in 5" :key="n" @click="">
  15.           <v-list-item-title v-text="'Item ' + n"></v-list-item-title>
  16.         </v-list-item>
  17.       </v-list>
  18.     </v-menu>
  19.   </div>
  20. </template>

Transitions（过渡动画） - 图9

展开过渡

扩展过渡用于扩展面板和列表组中。也有一个横向版本的 v-expand-x-transition。

template script

  1. <template>
  2.   <v-row
  3.     justify="center"
  5.     style="min-height: 160px;"
  6.   >
  7.     <v-col class="shrink">
  8.       <v-btn
  9.         class="ma-2"
  10.         color="primary"
  11.         @click="expand = !expand"
  12.       >
  13.         Expand Transition
  14.       </v-btn>
  16.       <v-expand-transition>
  17.         <v-card
  18.           v-show="expand"
  19.           height="100"
  20.           width="100"
  21.           class="mx-auto"
  22.         ></v-card>
  23.       </v-expand-transition>
  24.     </v-col>
  26.     <div class="mx-4 hidden-sm-and-down"></div>
  28.     <v-col class="shrink">
  29.       <v-btn
  30.         class="ma-2"
  31.         color="secondary"
  32.         @click="expand2 = !expand2"
  33.       >
  34.         Expand X Transition
  35.       </v-btn>
  37.       <v-expand-x-transition>
  38.         <v-card
  39.           v-show="expand2"
  40.           height="100"
  41.           width="100"
  42.           class="mx-auto"
  43.         ></v-card>
  44.       </v-expand-x-transition>
  45.     </v-col>
  46.   </v-row>
  47. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       expand: false,
  5.       expand2: false,
  6.     }),
  7.   }
  8. </script>

Transitions（过渡动画） - 图10

自定义原点

通过使用一个简单的属性来可编程地控制过渡原点。

template

  1. <template>
  2.   <div class="text-center">
  3.     <v-menu transition="scale-transition" origin="center center">
  4.       <template v-slot:activator="{ on }">
  5.         <v-btn
  6.           dark
  7.           color="primary"
  8.           v-on="on"
  9.         >
  10.           Scale Transition
  11.         </v-btn>
  12.       </template>
  13.       <v-list>
  14.         <v-list-item v-for="n in 5" :key="n" @click="() => {}">
  15.           <v-list-item-title v-text="'Item ' + n"></v-list-item-title>
  16.         </v-list-item>
  17.       </v-list>
  18.     </v-menu>
  19.   </div>
  20. </template>

Transitions（过渡动画） - 图11

Todo 列表

使用多个自定义转场，可以轻松实现简单的待办事项清单！

template script

  1. <template>
  2.   <v-container style="max-width: 500px">
  3.     <v-text-field
  4.       v-model="task"
  5.       label="What are you working on?"
  6.       solo
  7.       @keydown.enter="create"
  8.     >
  9.       <v-fade-transition v-slot:append>
  10.         <v-icon
  11.           v-if="task"
  12.           @click="create"
  13.         >
  14.           add_circle
  15.         </v-icon>
  16.       </v-fade-transition>
  17.     </v-text-field>
  19.     <h2 class="display-1 success--text pl-4">
  20.       Tasks:&nbsp;
  21.       <v-fade-transition leave-absolute>
  22.         <span :key="`tasks-${tasks.length}`">
  23.           {{ tasks.length }}
  24.         </span>
  25.       </v-fade-transition>
  26.     </h2>
  28.     <v-divider class="mt-4"></v-divider>
  30.     <v-row
  31.       class="my-1"
  32.       align="center"
  33.     >
  34.       <strong class="mx-4 info--text text--darken-2">
  35.         Remaining: {{ remainingTasks }}
  36.       </strong>
  38.       <v-divider vertical></v-divider>
  40.       <strong class="mx-4 success--text text--darken-2">
  41.         Completed: {{ completedTasks }}
  42.       </strong>
  44.       <v-spacer></v-spacer>
  46.       <v-progress-circular
  47.         :value="progress"
  48.         class="mr-2"
  49.       ></v-progress-circular>
  50.     </v-row>
  52.     <v-divider class="mb-4"></v-divider>
  54.     <v-card v-if="tasks.length > 0">
  55.       <v-slide-y-transition
  56.         class="py-0"
  57.         group
  58.         tag="v-list"
  59.       >
  60.         <template v-for="(task, i) in tasks">
  61.           <v-divider
  62.             v-if="i !== 0"
  63.             :key="`${i}-divider`"
  64.           ></v-divider>
  66.           <v-list-item :key="`${i}-${task.text}`">
  67.             <v-list-item-action>
  68.               <v-checkbox
  69.                 v-model="task.done"
  70.                 :color="task.done && 'grey' || 'primary'"
  71.               >
  72.                 <template v-slot:label>
  73.                   <div
  74.                     :class="task.done && 'grey--text' || 'primary--text'"
  75.                     class="ml-4"
  76.                     v-text="task.text"
  77.                   ></div>
  78.                 </template>
  79.               </v-checkbox>
  80.             </v-list-item-action>
  82.             <v-spacer></v-spacer>
  84.             <v-scroll-x-transition>
  85.               <v-icon
  86.                 v-if="task.done"
  87.                 color="success"
  88.               >
  89.                 check
  90.               </v-icon>
  91.             </v-scroll-x-transition>
  92.           </v-list-item>
  93.         </template>
  94.       </v-slide-y-transition>
  95.     </v-card>
  96.   </v-container>
  97. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       tasks: [
  5.         {
  6.           done: false,
  7.           text: 'Foobar',
  8.         },
  9.         {
  10.           done: false,
  11.           text: 'Fizzbuzz',
  12.         },
  13.       ],
  14.       task: null,
  15.     }),
  17.     computed: {
  18.       completedTasks () {
  19.         return this.tasks.filter(task => task.done).length
  20.       },
  21.       progress () {
  22.         return this.completedTasks / this.tasks.length * 100
  23.       },
  24.       remainingTasks () {
  25.         return this.tasks.length - this.completedTasks
  26.       },
  27.     },
  29.     methods: {
  30.       create () {
  31.         this.tasks.push({
  32.           done: false,
  33.           text: this.task,
  34.         })
  36.         this.task = null
  37.       },
  38.     },
  39.   }
  40. </script>

Transitions（过渡动画） - 图12

创建你自己的

你可以使用 Vuetify 的助手函数来创建你自己的自定义的过渡效果，这个函数会返回一个可以导入到 Vue 的对象。使用 Vue functional component 配置将确保您的过渡效果尽可能高性能。只需要导入函数：

  1. import { createSimpleTransition } from 'vuetify/lib/components/transitions/createTransition'
  3. // ES5
  4. // import { createSimpleTransition } from 'vuetify/es5/components/transitions/createTransition'
  6. const myTransition = createSimpleTransition('my-transition')
  8. Vue.component('my-transition', myTransition)

其中 createSimpleTransition 函数接受 1 个参数，即 name。这将是你可以与你的样式挂钩的名称。这是一个展示 v-fade-transition 的示例：

  1. .fade-transition
  2.   &-leave-active
  3.     position: absolute
  5.   &-enter-active, &-leave, &-leave-to
  6.     transition: $primary-transition
  8.   &-enter, &-leave-to
  9.     opacity: 0