<template>
<header>
<nav >
<div >
<router-link :to="{name : 'Home'}">>FireBlogs</router-link>
</div>
<div >
<ul>
<router-link to="#">Home</router-link>
<router-link to="#">Blogs</router-link>
<router-link to="#">Create Post</router-link>
<router-link to="#">Login/Register</router-link>
</ul>
</div>
</nav>
<menuIcon />
<transition name="mobile-nav" id="mobile-nav">
<ul>
<router-link to="#">Home</router-link>
<router-link to="#">Blogs</router-link>
<router-link to="#">Create Post</router-link>
<router-link to="#">Login/Register</router-link>
</ul>
</transition>
</header>
</template>
In this vueJS code I have some elements inside the transition tag, but when I inspect the web page I can only see this: Console Image here I wish to style the transition tag as a whole using CSS. Can somebody help me figure this out?
CodePudding user response:
Adding an answer since this is getting some upvotes:
transition
elements do not create a DOM element, they define transitions/changes of states to elements within the tag.
To create a DOM element that can be targeted with CSS, you can use TransitionGroup
and then use the tag
property to render a wrapping element:
<TransitionGroup tag="div">{stuff here}</TransitionGroup>
If you don't want to create another element, but keep the transition
element, you can use the parent element to style.
header > ul { styles here }