常用样式伪元素:after,:before下三角

最新推荐文章于 2024-01-18 10:25:57 发布

你蠢哭我咯

最新推荐文章于 2024-01-18 10:25:57 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： css样式文章标签： html css

本文链接：https://blog.youkuaiyun.com/m0_38069630/article/details/78899415

css样式专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的带有过渡效果的菜单组件案例。该案例利用Vue的<transition>元素实现了淡入淡出的效果，并通过CSS自定义了子菜单项的样式。此外，还展示了如何通过v-if指令控制菜单的显示与隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<transition name="fade" mode="out-in">
    <div class="child" v-if="isShowChildMenu" @click="getRouter4">
        <span @click="getRouter5" :class="{active:shop.navActive == 1}">购买商品</span>
        <span @click="getRouter6" :class="{active:shop.navActive == 1}">我的订单</span>
    </div>
</transition>

css

.child:after, .child:before {
   border: solid transparent;
    content: ' ';
    height: 0;
    top: 100%;
    position: absolute;
    width: 0;
}
.child:after {
    border-width: 0.16rem;
    border-top-color: #fff;
    left: 50%;
    margin-left: -0.16rem;
}
.child:before {
    border-width: 0.22rem;
    border-top-color: #e1e1e1;
    left: 50%;
    margin-left: -0.215rem;
}