Блог

Я пытаюсь открыть модальный, и когда я открываю модальный, я хочу, чтобы элемент перехода сообщал пользователю о прокрутке до исчезновения:

 <v-bottom-sheet v-if="sheet">
    <v-card>
        <v-card-title>Hello world</v-card-title>

        <v-card-text>
            <transition name="fade">
                <div v-if="!sheet" class="scrolly">
                    <div class="scroll-container">
                        <div class="scroller"></div>
                    </div>
                </div>
            </transition>
        </v-card-text>
    </v-card>
</v-bottom-sheet>
 

Проблема в том, что элемент перехода не отображается и не исчезает до тех пор, пока я не нажму кнопку переключения во второй раз для sheet

Пример Codepen

@kylecorbinhurst при анимации элементов на основе условия рекомендуется заменить ваши v-if «s» на v-show «s».

Официальные документы на этой странице хорошо объясняют это, но в основном элемент не существует в DOM, если v-if условие оценивается как false , тогда v-show как элемент, который оценивается как false, все равно будет существовать в DOM, но, скорее, его свойству отображения css будет присвоено значение none.

Я считаю, что переход не работает в первый раз, поскольку на самом деле его нет в DOM для затухания, однако при втором щелчке он есть. Я поиграл с вашим code pen, и переключение его на a v-show заставляет его работать с первого раза, как и ожидалось.

 <div v-show="!sheet" class="scrolly">
 

Существует проблема с получением как перехода, так и модального для одной и той же переменной. Итак, я настроил sheet и show . Затем, когда открывается модальный, я использую обещание сначала установить sheet значение true, а затем установить show значение false.

JS

 new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: () => ({
    sheet: false,
    show: true
  }),
  methods: {
    showModalFirst() {
      return new Promise((resolve, reject) => {
        this.sheet = true;

        const error = false;

        if (!error) {
          resolve();
        } else {
          reject();
        }
      });
    },
    showModal() {
      this.showModalFirst().then(
        function () {
          this.show = false;
        }.bind(this)
      );
    },

    closeModal() {
      this.sheet = false;
      this.show = true;
    }
  }
});
 

Шаблон

 <v-bottom-sheet
v-model="sheet"
inset
scrollable
persistent
>
    <v-card>
        <v-card-title>Hello World</v-card-title>
        <v-card-text class="always-scroll">
        
        <p>I'm baby succulents lomo typewriter stumptown poke yuccie humblebrag next level irony food truck kitsch. Shoreditch tote bag small batch fam vegan waistcoat narwhal air plant beard. Knausgaard man braid schlitz synth. Kogi taxidermy iPhone, chambray 3 wolf moon paleo woke thundercats gluten-free schlitz. Cray brunch tumeric ramps artisan church-key cold-pressed fingerstache freegan. Normcore pour-over disrupt, man braid 3 wolf moon activated charcoal echo park keytar affogato beard pop-up vape deep v tousled narwhal.</p>
        
        
        </v-card-text>
        <v-card-actions>
            <v-btn rounded color="purple white--text px-3" class="text-capitalize font-weight-medium">Create</v-btn>
            <v-btn v-on:click="closeModal()" text class="text-capitalize font-weight-medium" >Discard</v-btn>
            <transition name="fade">
                <div v-if="show" class="scrolly">
                <div class="scroll-container">
                    <div class="scroller"></div>
                </div>
                </div>
        </transition>
        </v-card-actions>
    </card>
</v-bottom-sheet>