Vue Material - Родные переходы на экране маршрутизатора
Хотя ответы, которые вы не можете проанализировать HTML с регулярными выражениями, верны, они не применяются здесь. OP просто хочет проанализировать один тег HTML с регулярными выражениями, и это то, что можно сделать с помощью регулярного выражения.
Предлагаемое регулярное выражение неверно:
<([a-z]+) *[^/]*?>
Если вы добавите что-то в регулярное выражение, путем обратного отслеживания его можно заставить сопоставить такие глупые вещи, как <a >>, [^/] слишком разрешительно. Также обратите внимание, что <space>*[^/]* является избыточным, поскольку [^/]* также может соответствовать пробелам.
Мое предложение было бы
<([a-z]+)[^>]*(?<!/)>
Где (?<! ... ) (в Perl-регулярных выражениях) отрицательный внешний вид. Он читает «a», затем слово, а затем все, что не является>, последнее из которых не может быть /, а затем> «.
Обратите внимание, что это позволяет такие вещи, как <a/ > ( как и исходное регулярное выражение), поэтому, если вы хотите что-то более ограничительное, вам нужно создать регулярное выражение для соответствия парам атрибутов, разделенных пробелами.
1 ответ
Вы должны обернуть <router-view> тегом <transition>:
<transition name="fade-slide-up" mode="out-in">
<router-view></router-view>
</transition>
И затем создать переход, который вы хотите в <style>. Вот пример:
.fade-slide-up-enter-active {
transition: all 0.5s ease;
}
.fade-slide-up-leave-active {
transition: all 0.5s ease;
}
.fade-slide-up-enter, .fade-slide-up-leave-to {
transform: translateY(40px);
opacity: 0;
}
-
1Замечательно. Спасибо за предложение @ un1. – Luca Cattide 16 July 2018 в 07:10