Оценить переходы: как установить скорость перехода - PullRequest
Новая
       16

Оценить переходы: как установить скорость перехода

0 голосов
/ 01 сентября 2018

У меня есть компонент <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" height="200">
    <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 Ответ

0 голосов
/ 02 сентября 2018

Похоже, что переходы Vuetify не имеют свойств конфигурации, поэтому вам придется создать свои собственные, чтобы настроить время.

Вы можете использовать компонент Vue <transition> , используя свойство 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>
...