前台29不同的路由组件中控制组件的展示与隐藏 及动画

于 2022-08-02 11:06:03 发布
阅读量138 收藏
点赞数
文章标签： css3 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liu12333322/article/details/126115130
版权
本文介绍了在Vue项目中如何全局引入组件并在单个组件中直接使用，以及如何根据组件状态控制显示隐藏。同时，详细讲解了利用Transition进行动画处理的方法，强调了需设置name属性并配合v-show实现过渡效果。在CSS样式中配置相应的动画效果，以达到理想的交互体验。
摘要由CSDN通过智能技术生成

1.使用全局组件

在main.js中已经全部引入，所以在单个组件中可以直接使用

2.判断在哪个组件中需要隐藏

在这里插入图片描述

3.根据不同的组件名称，确保移入移出是否显示隐藏

在这里插入图片描述

4.动画

必须拿transtion包着 并起一个name 并且内部存在v-show属性

在这里插入图片描述

在css样式中配置

在这里插入图片描述

在这里插入图片描述
注意：
在这里插入图片描述

小桐学前端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
动态控制html元素显示/隐藏
Sofia_li的专栏
08-20 5920
动态控制html元素显示/隐藏 动态控制html元素显示/隐藏 /** javascript控制页面控件隐藏显示的两种方法，方法的不同之处在于控件隐藏后是否还在页面上占位 */ //控制显现方法1（方法1隐藏后 页面的位置不被占用，类似于.net验证控件的Display=Dynamic） function display(id){ var traget=
鸿蒙开发逐个击破系列——组件导航 (Navigation)(推荐)和页面路由 (@ohos.router)
最新发布
qq_44160056的博客
08-12 939
提示：以下是本篇文章正文内容，下面案例可供参考易用性层面：Navigation天然具备标题、内容、回退按钮的功能联动，开发者可以直接使用此能力。Router若要实现此能力，需要自行定义；Navigation的页面是由组件构成，易于实现共享元素的转场。功能层面：Navigation天然支持一多，Router不支持；Navigation没有路由数量限制，Router限制32个；Navigation可以获取到路由栈NavPathStack，并对路由栈进行操作；
vue练手项目（day2：路由元信息控制底部组件是否显示和函数式路由编程）
qq_51172685的博客
12-23 687
分析页面发现，当页面处于home和search页面的时候Footer组件是可见的，但是当页面处于login和register的时候Footer是不可见的，这时候自然可以相到要用条件渲染：v-if或者是v-show；但是用哪个呢？一般来说v-if会对真实dom进行操作，选择要不要把dom挂载到页面上，而v-show是通过display样式控制是否显示元素，所以从效率上来看用v-show比较合适。那么v-show接受的是一个Boolean值，那么通过哪个值来控制页面是否显示呢？ ...
视图组件,路由组件,版本控制
weixin_30872671的博客
01-14 137
1,视图组件 django中写CBV的时候继承View,rest_framework继承的是APIView,,其实APIView是继承View urlpattEerns = [ # url(r'^book$', BookView.as_view()), # url(r'^book/(?P<id>\d+)', BookEditView....
前端js隐藏实际路由地址
weixin_43492777的博客
08-28 1712
window.history.replaceState({},0,替换的url)
前端关于隐藏控件的代码
ZHANGPENGYE007的博客
04-06 2354
https://www.cnblogs.com/mingforyou/archive/2012/09/05/2672373.html主要分为两种，一种是display一种是visible,当style.display="block"或style.visibility="visible"时控件或见，当style.display="none"或style.visibility="hidden"时控件不...
排队取号，map组件使用_微信小程序模板js代码前台前端H5页面源码.rar
08-09
在微信小程序开发中，"排队取号，map组件使用_微信小程序模板js代码前台前端H5页面源码.rar"是一个非常实用的资源，它包含了利用Map组件实现排队取号功能的示例代码。这个压缩包可能包括了HTML、CSS、JavaScript（JS...
很炫很酷的Jquery组件
09-12
在描述中提到的"多种前台实用技术组件"可能包括以下几种常见的jQuery插件： 1. **轮播插件**：如Bootstrap Carousel，用于展示多张图片或内容，可以设置自动滑动、触点滑动等功能。 2. **下拉菜单**：如Select2，它...
580web_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip
08-03
580web的UI组件源码展示了如何通过CSS和JavaScript实现这些常见组件，并确保在不同设备上的一致性和可用性。这些组件通常遵循一定的设计模式和规范，如Material Design或Bootstrap，以提供统一的视觉风格和交互反馈...
891web_HTML手机电脑网站_网页源码移动端前端js效果_H5模板_自适应css源码ui组件.zip
08-03
在这个压缩包中，“移动端前端js效果”可能包括滑动导航、下拉菜单、滚动动画、触摸事件处理等增强用户体验的功能。JavaScript还能实现异步数据加载，使得网页在不刷新整个页面的情况下更新内容。 4. **H5模板**：...
html中组件的两种隐藏方式（visibility和display）
wangminshe89
08-18 4634
在Html中如果我们想隐藏某个组件时，有两种方式：一种隐藏后组件仍占据一定面积。另一种组件隐藏后不占有页面面积。以下是代码： 1.隐藏后不占有面积 style=“display:none;” 若想显示： style="display:"; 2.隐藏后仍占有面积 style="visibility:hidden"; 若想显示： style="visibility:v...
vue公共组件的某部分通过路由的改变显示与隐藏，组件内路由守卫的使用控制两个专属路由之间的数据交互
weixin_44729896的博客
08-28 2009
组件内路由守卫的使用控制两个专属路由之间的数据交互： data() { return { tableData: [], currentRow: null, currentTime: "", loadTime: "" }; }, beforeRouteEnter: (to, from, next) => { if(...
前端使用vue route生成的url带有瞄点，如何去掉
taowuhua的博客
07-08 570
https://www.cnblogs.com/zhuzhenwei918/p/6892066.html
Vue项目中常见问题(1)如何控制组件在不同页面中的显示与隐藏
qq_46368050的博客
05-12 8554
目录 问题一:首页|搜索底部是有Footer组件，而登录注册是没有Footer组件 思路:Footer组件显示|隐藏，选择v-show|v-if 解决办法: 方法一:在App.vue中利用v-show来控制显示与隐藏 1.为什么用$route.path 因为在main.js中注册路由的信息时:当下图位置中书写router的时候,组件身上都会拥有$route,$routers属性 打开项目页面的控制台,可以看到$route下有path:"/home" 2.思考:假如有一百个路由组件要显示Foo
vue怎么在地址栏隐藏路由
qq_45780380的博客
05-15 3765
vue怎么在地址栏隐藏路由： 1.首先我们把我们要跳转的页面引入并注册： <script> import cate from './goods/Cate' import rights from './power/Rights' import role from './power/Roles' import user from './user/Users' export default { name: "Home", data (){ return { //左侧菜单数据
vue中显示和隐藏如何做动画_Vue框架Element UI教程-出现和隐藏动画（三）
weixin_34467247的博客
12-29 610
今天继续写组件的运用相关例子点击按钮的时候，元素会呈现一个出现和隐藏的动画功能。点击按钮我会消失在人海之中export default {data: () => ({show: true})}.transition-box {margin-bottom: 10px;width: 300px;height: 100px;border-radius: 4px;background-color: ...
js控制的动画，显示隐藏（元素，动画，显示隐藏）
热门推荐
技术分享
03-06 1万+
前端的页面代码js控制的代码// 鼠标悬浮效果 $('.hwenben').hover(function(){ $(this).addClass('bacf2') },function(){ $(this).removeClass('bacf2') }) $('ul li').hover(function(){ // 动画移动加上显示隐藏 $(this).children(...
小程序 制作自定义弹层 添加弹层显示和隐藏动画 父组件与子组件（自定义组件）之间传值
路漫漫其修远兮，吾将上下而求索
11-17 2158
0.说明与效果 本文打算用一个具体的例子，总结下这些开发过程中学习到的知识： 1.制作自定义组件，并在页面中引用 2.自定义组件的内容是一个表单弹层，添加弹层在弹出和隐藏时的动画 3.展示父组件与子组件（自定义组件）的传参功能 看下最终的效果图： 1.设置自定义组件，并在页面中引用 官网传送门其实步骤很简单 1.在跟目录中创建components目录（用于放置自定义组件，在此目录下再创建组件目录，新建组件时记得选择 ‘新建Component’ 即可 如果创建成功，打开js...
路由（一）路由-组件切换-重定向和按钮高亮设置
weixin_44867717的博客
02-09 916
路由-什么是 问：什么是路由？ 答：路由是一个js功能模块，用于解决做个组件切换显示问题的，本身对组件切换的各个技术有做封装，是更成熟组件切换解决方案，使用起来更高级、方便。 使用路由后，原生的 #锚点超链接、component占位符标签、window.onhashchange、window.location.hash就看不到了 路由：就是浏览器地址栏#锚点信息 与 业务组件的对应关系 内部有...
Android开发指南中文版：应用程序框架与组件解析
这些讨论了如何控制Activity在任务中的行为，包括单实例模式、标准模式、前台服务等，以及如何清理任务堆栈。 **进程和线程** - **进程**：Android应用运行在自己的进程中，系统根据内存使用情况决定是否杀死进程来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值