Vue.js добавить класс для исчезновения с v-если -- vue.js поле с участием tabs пол Связанный проблема

Vue.js add class for fade in with v-if


1
vote

проблема

русский

У меня есть настройка системы вкладки с vue.js и работает хорошо. Моя единственная проблема заключается в том, что добавление классов для исчезновения в непрозрачности, похоже, не работает с моими атрибутами V-IF:

Мой html и js

 <код> <div id="tabs" class="tabs-container">      <div class="tabs">         <a v-on:click="activetab=1" v-bind:class="[ activetab === 1 ? 'active' : '' ]">Tab 1</a>         <a v-on:click="activetab=2" v-bind:class="[ activetab === 2 ? 'active' : '' ]">Tab 2</a>         <a v-on:click="activetab=3" v-bind:class="[ activetab === 3 ? 'active' : '' ]">Tab 3</a>     </div>      <div class="content">         <div v-if="activetab === 1" v-bind:class="[ activetab === 1 ? 'tabcontent fadedIn' : '' ]">             Content for tab one         </div>         <div v-if="activetab === 2"  v-bind:class="[ activetab === 2 ? 'tabcontent fadedIn' : '' ]">             Content for tab two         </div>         <div v-if="activetab === 3"  v-bind:class="[ activetab === 3 ? 'tabcontent fadedIn' : '' ]">             Content for tab three         </div>     </div>  </div>  <script type="text/javascript"> new Vue({     el: '#tabs',     data: { activetab: 1 }, });   </script>   

А вот мои CSS:

 <код> .tabcontent {   opacity: 0;    transition: opacity 1s ease-in-out;    -moz-transition: opacity 1s ease-in-out;    -webkit-transition: opacity 1s ease-in-out; }  .tabcontent.fadedIn {     opacity: 1; }   

Я не уверен, что я делаю не так, но что-то говорит мне, что я очень близко. Есть ли лучший способ сделать это?

Спасибо

Английский оригинал

I have a tab system setup with Vue.js and it works well. My only issue is that adding classes for fading in opacity doesn't seem to work with my v-if attributes:

My HTML and JS

<div id="tabs" class="tabs-container">      <div class="tabs">         <a v-on:click="activetab=1" v-bind:class="[ activetab === 1 ? 'active' : '' ]">Tab 1</a>         <a v-on:click="activetab=2" v-bind:class="[ activetab === 2 ? 'active' : '' ]">Tab 2</a>         <a v-on:click="activetab=3" v-bind:class="[ activetab === 3 ? 'active' : '' ]">Tab 3</a>     </div>      <div class="content">         <div v-if="activetab === 1" v-bind:class="[ activetab === 1 ? 'tabcontent fadedIn' : '' ]">             Content for tab one         </div>         <div v-if="activetab === 2"  v-bind:class="[ activetab === 2 ? 'tabcontent fadedIn' : '' ]">             Content for tab two         </div>         <div v-if="activetab === 3"  v-bind:class="[ activetab === 3 ? 'tabcontent fadedIn' : '' ]">             Content for tab three         </div>     </div>  </div>  <script type="text/javascript"> new Vue({     el: '#tabs',     data: { activetab: 1 }, });   </script> 

And here is my CSS:

.tabcontent {   opacity: 0;    transition: opacity 1s ease-in-out;    -moz-transition: opacity 1s ease-in-out;    -webkit-transition: opacity 1s ease-in-out; }  .tabcontent.fadedIn {     opacity: 1; } 

I'm not sure what I'm doing wrong but something tells me I'm very close. Is there a better way to do this?

Thanks

</div
     
 
 

Список ответов

0
 
vote

Я уверен, что проблема заключается в том, что тег HTML (<код> <a> в этом случае), необходимо сначала добавлять в DOM (т.е. V-if = true), то вам нужно Добавьте класс CSS на этом элементе, который вызывает выцветание.

Вы вызываете оба в то же время (вставка в домос с классом Fadein), и это будет короткосхемный эффект перехода и просто показывать его как видимый.

Использование переходных учреждений Vue (как @matheusvalenza, указанная в комментарии), является одним из способов иметь класс CSS, применяемый отдельно после вставки DOM.

 

I'm pretty sure the issue is that the html tag (<a> in this case), needs to first be added to the DOM (ie v-if = true), then you need to add the css class on that element which triggers the fading in.

You are causing both to happen at the same time (Inserting into DOM with a fadeIn class) and that will short-circuit the transition effect and just show it as visible.

Using vue's transition facilities (as @MatheusValenza pointed out in the comment) is one way to have the css class applied seperately after the DOM insertion.

</div
 
 

Связанный проблема

0  Вложенный объект Bootstrap-Vue в массиве, чтобы показать в таблице  ( Bootstrap vue nested object in array to show in table ) 
Я пытаюсь распечатать таблицу лиги, но team часть находится в вложенном объекте. Как я могу подключиться к этому объекту, затем сделать их в таблицевых ячее...

1  vue-pdf демонстрация не работает  ( Vue pdf demo not working ) 
Я ищу встраивать файлы PDF в моем <код> vue.js 2 веб-приложения. Похоже, лучший вариант - использовать Vue-pdf . У меня есть следующие два вопроса: Demo...

1  вя-часы-подборщик не работает должным образом в течение цикла в VUE JS  ( Vue clock picker doesnt work properly in for loop in vue js ) 
<Р> Я пытаюсь использовать VUE-часы-подборщик для выбора времени. Вот то, что я сделал - <код> { "name": "Name", "code" "Code", "_embedded" : { ...

2  Скачать массив изображений на кнопку  ( Download array of images on click of a button ) 
У меня есть очень базовый HTML-блок, который имеет <код> button для загрузки: <код> <div id="getImageWrapper"> <div class="image"> <p class="im...

3  Динамически добавлять строки, чтобы сформировать использование Vue.js  ( Dynamically add rows to form using vue js ) 
Я пытаюсь сделать динамическую форму, используя Vue. Пользователь нажимает кнопку «Добавить», и для них появляется другой ряд, чтобы добавить данные. Проблема...

2  Как запустить созданный веб-сайт NUXT из файловой системы?  ( How to run a nuxt generated website from filesystem ) 
Когда я запускаю веб-сайт NUXT сгенерированного Vue из файловой системы, без сервера, я получаю <код> GET file:///_nuxt/... с состоянием <код> (failed) Ка...

0  Локальные / литералы, содержащие HTML  ( Locales literals containing html ) 
в <Код> locale/lang.json У меня есть <код> { "title": "Title", "image": "service-corporate_thumb-v2.jpg", "alt": "alt", "imageFooter": "Some capt...

1  Держите токен обновлен на действии Axios  ( Keep token updated on axios action ) 
Я хочу использовать API Express REST, который требует действительного веб-маршрута JSON для некоторых маршрутов. Из-за того, что я должен передать токен от Lo...

0  Код JavaScript в модальном загрузке не работает  ( Javascript code in modal of bootstrap not run ) 
код JavaScript в модальном загрузке не запускается: в CoCOle, ошибка такова: Если код не помещен в модуль, нет ошибок, как выше скриншот. код: (код не ...

2  Как сосредоточиться на V-Textarea, программически в Vuetify и Teadycript?  ( How to focus v textarea programatically in vuetify and typescript ) 
кажется невозможным сейчас, я пробовал сумасшедшие вещи, как: <код> (this.refs.vtextarea as any).textarea.focus() ((this.refs.vtextarea as Vue).$el as HTML...

0  Laravel Vue Axios не возвращает ответы  ( Laravel vue axios not returning response data ) 
Это мой первый раз, используя Laravel Vue и Axios. Я пытаюсь добавить кнопку Подписаться на канал пользователя. Это не возвращает абонентские ответы в Axios?....

1  Визуализация списка элементов в компоненте, прилагаемой маршрутизатором  ( Render list of items in a component attached by router ) 
Я хотел бы перечислить элементы и отобразить детали, когда щелкнулся элемент. Сценарий выглядит как ниже: <код> const items = [ { id: 1, }, { ...

0  V-Carousel отзывчивается, но не изображения, которые он содержит  ( V carousel is responsive but not the images it contains ) 
Когда я использую V-Carousel , все работает нормально, кроме я заметил на мобильном Если сама карусель отзывчивается, изображения внутри нее нет, поэтому ото...

0  Смотреть реквиты от детского компонента Vue.js  ( Watch props from children component vue js ) 
У меня есть два компонента «Number-IPut» и «вход корзины». Как я могу смотреть опоры из номера ввода (значение) в корзине? номер входного компонента: <код...

3  Адаптер загрузки CKeditor отправляет [Обещание объекта] на сервер  ( Ckeditor upload adapter sends object promise to server ) 
Я пытался реализовать Ckeditor5 в проект Vuejs, а после получения всей рабочей инфраструктуры я не могу получить фактический файл для загрузки на сервер PHP. ...

Связанный проблема

0  Вложенный объект Bootstrap-Vue в массиве, чтобы показать в таблице 
1  vue-pdf демонстрация не работает 
1  вя-часы-подборщик не работает должным образом в течение цикла в VUE JS 
2  Скачать массив изображений на кнопку 
3  Динамически добавлять строки, чтобы сформировать использование Vue.js 
2  Как запустить созданный веб-сайт NUXT из файловой системы? 
0  Локальные / литералы, содержащие HTML 
1  Держите токен обновлен на действии Axios 
0  Код JavaScript в модальном загрузке не работает 
2  Как сосредоточиться на V-Textarea, программически в Vuetify и Teadycript? 
0  Laravel Vue Axios не возвращает ответы 
1  Визуализация списка элементов в компоненте, прилагаемой маршрутизатором 
0  V-Carousel отзывчивается, но не изображения, которые он содержит 
0  Смотреть реквиты от детского компонента Vue.js 
3  Адаптер загрузки CKeditor отправляет [Обещание объекта] на сервер 



© 2021 www.qaru.top All Rights Reserved. Q&A House все права защищены


Licensed under cc by-sa 3.0 with attribution required.