Vuetify 전환:전환 속도 설정 방법

Vuetify 전환:전환 속도 설정 방법

나는 가지고 있다.<audioplayer>부모 컴포넌트 바닥에서 천천히 슬라이드하여 표시하고 싶은 컴포넌트.

안에서 정의했습니다.<v-slide-y-transition>하지만 어떻게 하면 아래에서 천천히 미끄러지게 할 수 있을까요?에 대해 정의할 Atribute를 찾을 수 없습니다.<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>

Vuetify 트랜지션에는 설정 속성이 없는 것 같기 때문에 타이밍을 조정하려면 독자적인 속성을 작성해야 합니다.

CSS를 사용하여 Vue 컴포넌트를 사용할 수 있습니다.transition애니메이션의 타이밍을 설정하는 속성.

예를 들어, 다음의 CSS는, 다음의 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>

Vue 2.2.0+를 사용하는 경우 이행 컴포넌트에 기간 프로포스트가 있기 때문에 다음과 같이 표시됩니다(질문에서 vuetify 이행명을 사용하는 경우).

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

주의: 다음 항목을 추가할 수 있습니다.duration트랜지션 컴포넌트를 확인하기 위한 속성입니다.값은 밀리초 단위입니다.하지만 정확도가 낮기 때문에 아래와 같이 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>

언급URL : https://stackoverflow.com/questions/52129131/vuetify-transitions-how-to-set-the-transition-speed