доброе утро всем, есть вопрос: как задействовать transition всех элементов на странице при перехода с нее? то есть мне надо, чтобы элементы не только анимированно появлялись (transition appear), но и анимированно исчезали. анимация самого router-view мне не подходит

доброе утро всем, есть вопрос: как задействовать transition всех элементов на странице при перехода с нее? то есть мне надо, чтобы элементы не только анимированно появлялись (transition appear), но и анимированно исчезали. анимация самого router-view мне не подходит

у вью компоненты есть анимация, ее и испоьлзуй

https://ru.vuejs.org/v2/guide/transitions.html

я что-то не понял, о чем речь, пардон. можно поконкретней?

это всё понятно. вы уверенны, что там есть ответ на мой вопрос?

это всё понятно. вы уверенны, что там есть ответ на мой вопрос?

если у тебя страница строиться так: * layout * other components тогда ты можешь навесить все анмации на layout

не могу, мне надо чтобы все анимированные элементы появились также как и исчезли. то есть каждый блок на странице с transition должен отыграть leave-классы при изменении роута

но Vue (насколько я понимаю) такой возможности не предоставляет. анимации отыгрывают либо при первичном рендеринге, либо при условном. или я не прав? или есть, может, способ императивно вызвать анимацию?

если так, то как это сделать правильно

не могу, мне надо чтобы все анимированные элементы появились также как и исчезли. то есть каждый блок на странице с transition должен отыграть leave-классы при изменении роута

ты можешь производить их инициализацию в afterEnter https://ru.vuejs.org/v2/guide/transitions.html#JavaScript-хуки

инициализацию чего? я так понимаю, эти хуки нужны для JS-анимаций, но как это решает мою проблему?

я могу добавлять класс вручную в этом хуке, вы это предлагаете?

инициализацию чего? я так понимаю, эти хуки нужны для JS-анимаций, но как это решает мою проблему?

допустим, если у тебя есть список одинаковых компонент. которые нужно отобразить, ты можешь их добавлять в data родительской компоненты не в created или mounted, а в afterEter, теотеритески, тогда ты можешь спокойненько настроить анимацию их появления

у меня в router-view всегда одновременно отображается не более 1 компонента

у меня в router-view всегда одновременно отображается не более 1 компонента

покажи код роутера

в подключаемых компонентах зависимостей от других компонентов нет

так, тогда я не очень понимаю в чем вопрос у тебя вот эти index.vue содержат в себе другие компоненты и ты хочешь сделать такое: 1) анимированное показать index 2) после анимрованного index, анимировано показать компоненты на это странице?

нет, они не содержат другие компоненты

и нет, я не совсем это хочу сделать) секунду

как видно, в нем есть блоки с transition. я хочу, чтобы эти блоки отыгрывали leave-анимацию при смене роута, когда этот компонент показывать уже не надо

как видно, в нем есть блоки с transition. я хочу, чтобы эти блоки отыгрывали leave-анимацию при смене роута, когда этот компонент показывать уже не надо

а, ну тогда все еще проще

оформи это в компоненты с v-pre и радуйся жизни

на них уже навесить всю анимацию

а что это за директива такая? не слышал о ней

а что это за директива такая? не слышал о ней

https://ru.vuejs.org/v2/api/#v-pre

спасибо

на них уже навесить всю анимацию

а за счет чего должна сказаться разница? так мы используем жизненный цикл компонентов, которого нет у обычных блоков?

а за счет чего должна сказаться разница? так мы используем жизненный цикл компонентов, которого нет у обычных блоков?

да

с помощью JS-хуков? или можно использовать обычный transition?

с помощью JS-хуков? или можно использовать обычный transition?

https://ru.vuejs.org/v2/guide/transitions.html#Анимирование-одиночного-элемента-компонента

Вот мне интересно

Как показывать окно логина

Если примерно такая стуркута

<navbar></navbar><router-view></router-view>

Даже если я засуну Login.vue в роутер

но это же пример анимации условного рендеринга. спасибо, я это всё видел и уже реализовал относительно много анимации, вот только с этим ступор. итого, получается, что мне надо: 1. вынести блоки с transition в отдельные компоненты 2. transition из этих компонентов убрать и обернуть им вызов компонента в разметке (или это не важно?) и всё?

Навбар все равно будет отображаться

Как показывать окно логина

я не понял вопрос

но это же пример анимации условного рендеринга. спасибо, я это всё видел и уже реализовал относительно много анимации, вот только с этим ступор. итого, получается, что мне надо: 1. вынести блоки с transition в отдельные компоненты 2. transition из этих компонентов убрать и обернуть им вызов компонента в разметке (или это не важно?) и всё?

можешь оборачивать, а можешь просто переписать css классы для этого компонента

да переписывать вроде ничего не надо) за анимацию же отвечают стили из transition(name='...')

они у меня глобальные

да переписывать вроде ничего не надо) за анимацию же отвечают стили из transition(name='...')

ну вдруг ы решишь прилепить свои названия css классов для анимации конкретного эелмента, тем более что вью позволяет это сделать

да, понял, к чему это. вы очень помогли, надеюсь, получится. только расстраивает, что придется вмешиваться в логику приложения, плодить компоненты там, где они не нужны

Навбар все равно будет отображаться

я решал это дело с помощью layout и внутри делал именнованные router-view и в зависимости от пути подсовывал нужны layout

я вообще не понял, в чем ваша проблема, rocket

навбар надо отображать не везде?

я вообще не понял, в чем ваша проблема, rocket

кароч, у него одна клавная компонента с навбаром и роутер вью, и он передает в зависимости от пути разные компоненты (напрмиер Login.vue), но в случае логика он кочет чтобы навбар не показывался

я решал это дело с помощью layout и внутри делал именнованные router-view и в зависимости от пути подсовывал нужны layout

решение я предложил выше

да, либо так, либо проще и возможно менее правильно - v-if='$route.name !== "Login"' на навбар

да, либо так, либо проще и возможно менее правильно - v-if='$route.name !== "Login"' на навбар

Это хуже

А что будет, если у тебя на нескольких путях навбар не нужно будет показывать?

Каждый раз пихать новое условие, не, спасибо

можно завести массив и проверять в нем наличие текущего роута с .include()

в v-if запихнуть метод

можно завести массив и проверять в нем наличие текущего роута с .include()

Не костыль, а КОСТЫЛИЩЕ!

у меня есть в этом талант)

Ну как бы для авторизации нужен свой лейаут

Ну как бы для авторизации нужен свой лейаут

Кому ответил то хоть?

В общий чат)

В общий чат)

А на что ответил то?

Как все сложно :|

ERROR: S client not available

Юзайте reply господа

да, либо так, либо проще и возможно менее правильно - v-if='$route.name !== "Login"' на навбар

Вот на этот

Привет, коллеги! А подскажите, кто-нибудь использует Vue вместе с TypeScript и vue-class-component? Проблема возникла - tslint яростно офигевает в vue-class-component/lib/index.d.ts от того, что не может найти namespace 'Vue'

Скоро новый релиз похоже, v2.2.0-beta.1 появился)

Да, тоже заметил. Ждем релиз нотес)

memory leak там один точно исправлял

в принципе вкратце без красивого оформления можно их тут почитать https://github.com/vuejs/vue/compare/v2.1.10...dev

Пасиба ?

@Vhaldemario https://forum.vuejs.org/t/typescript-is-there-a-type-definition-for-vue2-and-how-to-use-it/1741

может поможет)

Спасибо, сейчас гляну!

Да, тоже заметил. Ждем релиз нотес)

там из самого вкусного error boundaries

Ошибки в лайфсайкл методах больше не крашат всю аппликуху

Оо, это круто. Надо будет полистать коммиты.

почему в index.js файле делаю export Auth from './Auth'; export Hello from './Hello'; export List from './List'; в другом import { Auth, Hello, List } from 'components/' и в ответ подучаю Unexpected token, expected { (1:7) > 1 | export Auth from './Auth'; | ^ 2 | export Hello from './Hello'; 3 | export List from './List';

Што

Почитайте про import/export, у вас синтаксис неправильный

почему в index.js файле делаю export Auth from './Auth'; export Hello from './Hello'; export List from './List'; в другом import { Auth, Hello, List } from 'components/' и в ответ подучаю Unexpected token, expected { (1:7) > 1 | export Auth from './Auth'; | ^ 2 | export Hello from './Hello'; 3 | export List from './List';

Ничего, что import ... from '...' ?

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/export и вот https://github.com/leebyron/ecmascript-more-export-from

Ничего, что import ... from '...' ?

что именно я не так делаю?

что именно я не так делаю?

IMPORT

а ты EXPORT пишешь

IMPORT взять, EXPORT отдать

все верно в router/index.js я IMPORT делаю http://prntscr.com/ectla7 в components/index.js я EXPORT делаю http://prntscr.com/ectlx6

Тоха обосрался

Тоха обосрался

Да я хз вообще, что он написал

А я с вагрантом *****

Одни ошибки

почему в index.js файле делаю export Auth from './Auth'; export Hello from './Hello'; export List from './List'; в другом import { Auth, Hello, List } from 'components/' и в ответ подучаю Unexpected token, expected { (1:7) > 1 | export Auth from './Auth'; | ^ 2 | export Hello from './Hello'; 3 | export List from './List';

import { Auth, Hello, List } from from 'components/' Это откуда ты так пытаешься сделать импорт? :) Из папки? Это так не работает.

почему в index.js файле делаю export Auth from './Auth'; export Hello from './Hello'; export List from './List'; в другом import { Auth, Hello, List } from 'components/' и в ответ подучаю Unexpected token, expected { (1:7) > 1 | export Auth from './Auth'; | ^ 2 | export Hello from './Hello'; 3 | export List from './List';

решил нужно было пакет установить "babel-plugin-transform-export-extensions" и в файл ".babelrc" дописать в поле "plugins" - "transform-export-extensions"

import { Auth, Hello, List } from from 'components/' Это откуда ты так пытаешься сделать импорт? :) Из папки? Это так не работает.

Это возможность сразу из одного файла экспортнуть несколько модулей https://github.com/leebyron/ecmascript-more-export-from