Vue中transition未被注册为HTML元素 如何通过CSS设置整体样式

问题相关代码 #

<template>
<header>
<nav class="container">
    <div class="branding">
        <router-link class="header" :to="{name : 'Home'}">FireBlogs</router-link>
    </div>
    <div class="nav-links">
        <ul>
            <router-link class="link" to="#">Home</router-link>
            <router-link class="link" to="#">Blogs</router-link>
            <router-link class="link" to="#">Create Post</router-link>
            <router-link class="link" to="#">Login/Register</router-link>
        </ul>
    </div>
</nav>
<menuIcon class="menu-icon" />
    <transition name="mobile-nav" id="mobile-nav">
        <ul>
            <router-link class="link" to="#">Home</router-link>
            <router-link class="link" to="#">Blogs</router-link>
            <router-link class="link" to="#">Create Post</router-link>
            <router-link class="link" to="#">Login/Register</router-link>
        </ul>
    </transition>
</header>
</template>

原因说明 #

<transition>是Vue内置的抽象功能组件，不会渲染为真实DOM节点，直接在transition标签上添加id、class等属性，不会出现在最终生成的页面DOM结构里，自然无法通过CSS选择器选中设置样式。

解决方法 #

• 方法1：直接给transition的直接子元素（当前代码中是包裹导航项的<ul>标签）添加需要的id、类名即可。transition的动画效果本身就是作用在它的直接子元素上的，修改示例：

<transition name="mobile-nav">
  <!-- 把id、样式类直接绑定在真实存在的子DOM节点上 -->
  <ul id="mobile-nav" class="mobile-nav-container">
    <router-link class="link" to="#">Home</router-link>
    <router-link class="link" to="#">Blogs</router-link>
    <router-link class="link" to="#">Create Post</router-link>
    <router-link class="link" to="#">Login/Register</router-link>
  </ul>
</transition>

后续写CSS时直接匹配#mobile-nav或者.mobile-nav-container就能给整个导航模块设置样式。

• 方法2：如果需要额外的容器做定位、嵌套布局，可以在transition标签内部、导航内容外层套一个真实的DOM标签（比如div），把样式属性加在这个真实标签上即可，不要把样式属性绑定在transition标签上。

注意：transition上的name="mobile-nav"属性是用来配置过渡动画类名前缀的，对应控制动画状态的类为.mobile-nav-enter-from、.mobile-nav-enter-active、.mobile-nav-leave-active、.mobile-nav-leave-to，仅用于控制过渡动画效果，和容器的静态布局样式无关。

内容的提问来源于stack exchange，提问作者MAHEEDHAR A