Vuetify 过渡：如何设置过渡速度

Posted 2023-02-22

【中文标题】Vuetify 过渡：如何设置过渡速度

【英文标题】：Vuetify transitions: How to set the transition speed

【发布时间】：2019-02-07 07:02:56

【问题描述】：

我有一个 <audioplayer> 组件，我希望它从父组件的底部缓慢滑动显示。

我在<v-slide-y-transition> 中定义了它，但是我怎样才能让它从底部慢慢滑动呢？我找不到要为 <v-slide-y-transition> Vuetify 组件定义的任何属性。

<v-parallax src="img/hero.jpeg">
  <v-layout column align-center justify-center>
    <img src="@/assets/images/logo.png" >
    <h1 class="mb-2 display-1 text-xs-center">HEADER 1</h1>
    <h2 class="mb-2 display-1 text-xs-center">HEADER 2</h2>
    <div class="subheading mb-3 text-xs-center">SUB-HEADER</div>
    <v-btn round @click="switchAudioPlayer()" large href="#">LISTEN</v-btn>
    <v-slide-y-transition>
      <audioplayer id="audioplayer" v-if="listening" v-show="showAudioPlayer" :autoPlay="autoPlay" :file="audioFile" :canPlay="audioReady" :ended="switchAudioPlayer"></audioplayer>
    </v-slide-y-transition>
 </v-layout>
</v-parallax>

【参考方案1】：

Vuetify 过渡似乎没有配置属性，因此您必须创建自己的才能调整时间。

您可以使用 Vue <transition> component，使用 CSS transition 属性来设置动画的时间。

例如，以下 CSS 将 slide-fade 动画的持续时间设置为 2 秒。

.slide-fade-enter-active 
  transition: all 2s ease;

演示：

new Vue(
  el: '#app',
  data: () => (
    show: false,
  ),
)

.slide-fade-enter-active 
  transition: all 2s ease;

.slide-fade-leave-active 
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);

.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ 
  transform: translateY(30px);
  opacity: 0;


footer 
  position: absolute;
  bottom: 0;

<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <footer>
    <transition name="slide-fade">
      <p v-if="show">hello</p>
    </transition>
  </footer>
</div>

【参考方案2】：

如果您使用 Vue 2.2.0+，则转换组件有一个 duration prop，因此，它看起来像这样（如果您使用问题中的 vuetify 转换名称）：

 <transition appear name="slide-y-transition" :duration=" enter: 500, leave: 800 >

【讨论】：

我已经尝试过使用 Vue 2.6.12 但它不起作用：<transition appear name="slide-x-transition" :duration="5000"> 和 <transition appear name="slide-x-transition" :duration=" enter: 5000, leave: 5000 ">。它们仍然以默认速度动画，即几百毫秒

【参考方案3】：

注意：我注意到您可以添加 duration 属性来 vuetify 转换组件。它的值以毫秒为单位。但它不是很准确，所以我将它与一些 CSS 一起使用，如下所示。

new Vue(
  el: '#app',
  vuetify: new Vuetify(),
  data: () => (
    show: false,
  ),
)

p 
  background: lightgreen;


.slide-x-transition-enter-active 
  background-color: #b2fab2;
  transition: background-color 2s, all 2s;

.slide-x-transition-enter-to 
  background-color: white;

.slide-x-transition-leave-active 
  background-color: white;
  transition: background-color 2s, all 2s;

.slide-x-transition-leave-to 
  background-color: #fccece;

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<v-app id="app">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <v-slide-x-transition duration="2000">
   <p v-if="show">hello</p>
  </v-slide-x-transition>
</v-app>