基于vue展开收起动画的示例代码
之前用jquery实现还很简单,然后用vue就一直不行,然后在网上找了很多,又仔细看了vue官网 的过渡&动画,发现其实很简单 (可以多看vue官网 过渡&动画 实现更多效果)
1、实际效果
2、代码
<!--css--> .box{ height:200px;width: 200px; background-color:black; } .draw-enter-active, .draw-leave-active { transition: all 1s ease; } .draw-enter, .draw-leave-to /* .fade-leave-active below version 2.1.8 */ { height: 0; } <div id="app"> <button @click="boxshow = !boxshow">点击展开/关闭</button> <transition name="draw"> <!--这里的name 和 css 类名第一个字段要一样--> <div class="box" v-show="boxshow"></div> </transition> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script> new Vue({ el:'#app', data:{ boxshow:false }, }); </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
vue 点击展开显示更多(点击收起部分隐藏)
功能如下: 这里就需要一开始只显示6个数据,点击展开才显示全部 HTML里调用showdetailList: <div> <p v-for="(item, index) in showdetailList"> <span>{{item.title}}</span> <span>{{item.name}}</span> </p> </div> <div v-if="detail
-
vue和react等项目中更简单的实现展开收起更多等效果示例
前言 本文题目中虽然写有vue和react,但是并非vue和react相关知识,而是最基本的html5和css3的一些知识,之所以写vue,是因为我最近项目中用到了类似效果,我用vue相关知识实现并不雅观,用html5和css3实现,则更加完美. 项目案例 项目中有如下效果: 好多展开收起,对于这个的实现,我一开始用了vue一些比较挫的dom操作,就是父元素toggleClass一个类名,进行子元素的显示和隐藏. 由于这个方法是通用方法,项目中好多地方使用,代码大概如下: toggleShow(
-
vue.js 实现点击展开收起动画效果
最近公司项目加了个页面,其中要求是这样的,点击对应列表,展开和收起,其实就是显示和隐藏内容部分:说来惭愧,我花了半天时间才搞出来(自黑一下~),接下来分享给大家,先上效果图: vue页面: <template> <div class="dealRecord-wrap"> <div class="title-contant" v-for="(item,index) in items " > <div cla
-
vuejs数据超出单行显示更多,点击展开剩余数据实例
说下我在工作中遇到的这个需求 1:页面上的菜单选项,选项内容是后台接口返回的数据,现在的需求是当选项的内容超出一行,在这行的右面显示更多,点击更多,显示剩下的选项的内容 看下效果图 这是展开的效果图 下面先看下我的html部分代码 <div :class="bussinessType?'show':'hidde'"> <dl> <dt>业务类型:</dt> <dd ref="bussinessTypeRef"&g
-
vue实现点击展开点击收起效果
安装vue的步骤在这里就不进行赘述了,下面直接进入正题 首先定义一下data里面的数据: data () { return { toLearnList:[ 'html','css','javascript','java','php' //进行显示的数据 ], showAll:false, //标记数据是否需要完全显示的属性 } } 使用computed对data进行处理: computed:{ showList:function(){ if(this.showAll == false){ //当
-
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
文字比较难解释,直接看图应该就懂是要做什么了. 需求 工作中遇到的,需求就是超过四行得有个展开按钮,点击展开显示所有内容,不超过四行的话就不需要这个按钮并显示所有内容. 思路首先得判断文本自否超过四行,因为这些一般都是是前端异步请求然后后端发送过来,在组长的指导下,使用了 Vue 中的 nextTick 来监听 DOM 中是数据变化.接下来主要是 css 上的思路,其实上图可以分为两部分,如下图,标号1的部分展示前面三行,标号为2的部分会根据1的行数判断缩进的大小,然后展示第四行.最后通过背景色
-
基于vue展开收起动画的示例代码
之前用jquery实现还很简单,然后用vue就一直不行,然后在网上找了很多,又仔细看了vue官网 的过渡&动画,发现其实很简单 (可以多看vue官网 过渡&动画 实现更多效果) 1.实际效果 2.代码 <!--css--> .box{ height:200px;width: 200px; background-color:black; } .draw-enter-active, .draw-leave-active { transition: all 1s ease; } .d
-
基于Vue实现微前端的示例代码
前端微服务化一直是前端社区的一个热门话题,早在2018年就有不少开发者提出过各种解决方案.或许是未得精髓,个人认为基于Web Components的实现脱离整体打包逻辑的,难以工程化.直到遇到了vue-cli 3,子模块打包的问题得以迎刃而解.2019年秋,团队内部初步实现前端分布式开发,解决了集中式开发部署的"老大难"问题.个人认为,随着WebAssembly等技术的兴起,"前端后移"越来越明显,前端微服务会成为大前端的一个趋势.下面简单分享下本人对前端微服
-
基于vue的验证码组件的示例代码
最近在自己写页面,模仿思否论坛,然后写登录注册UI的时候需要一个验证码组件. 去搜一下没找到什么合适的,而且大多都是基于后端的,于是自己手写一个. 演示 分析验证码组件 分析验证码功能 随机出现的数字大小写字母 (基础功能) 不同的数字或者字母有不同的颜色 (功能优化) 不同的数字或者字母有不同的字体大写 (功能优化) 不同的数字或者字母有不同的边距 (功能优化) 不同的数字或者字母有不同的倾斜角度 (功能优化) 更多功能优化... 分析组件功能 可以设置生成验证码的长度 (基本功能) 可以设置
-
Vue 实现展开折叠效果的示例代码
本文介绍了Vue 实现展开折叠效果的示例代码,分享给大家,具体如下: 效果如见: 1.html代码 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js文本段落展开和收拢效果</title> <script type="text/javasc
-
vue实现数字变换动画的示例代码
最近开发项目的时候有个屏保的部分,就几个数字觉得过于单调,索性加点特效在里边,UI图数字部分如下: emmm.所以加了个数字动态变动的效果 一开始直接在网上copy了一份.但是部分功能不太能满足需求 ,so,改动了部分,完美实现 改动部分: 1.数字不需要千位符,但是为了防止以后要有 所以加了个参数判断,默认是没有的 2.数字整数变动 3.组件改为行内元素,能更好的兼容页面样式 4.第二次数字变动在上次的数字累加 5.添加监听器防止页面不更新的情况 代码如下: <template> <s
-
Vue中实现过渡动画效果示例代码
目录 Vue的transition动画 Transition动画的使用 Transition组件的原理 Transition动画的class Vue的animation动画 Animation动画的使用 同时设置两种动画(了解) 过渡的模式mode 列表过渡 列表过渡的介绍 列表过渡的使用 Vue的transition动画 Transition动画的使用 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验: React框架本身并没有提供任何动画相关的API,所以在R
-
vue实现图片滚动的示例代码(类似走马灯效果)
上次写了一个简单的图片轮播,这个相当于在上面的一些改进.这个组件除了可以进行图片滚动外,也可以嵌入任何内容的标签进行滚动,里面用了slot进行封装. 父: <template> <div id="app"> <er-carousel-index :typeNumber=2 :pageNumber=3 :timeSpace=2 :duration=2 :isOrNotCircle="true" url="/src/js/inde
-
基于WPF实现弹幕效果的示例代码
WPF 实现弹幕效果 框架使用大于等于.NET40: Visual Studio 2022; 项目使用 MIT 开源许可协议: 此篇代码目的只是为了分享思路 实现基础弹幕一定是要使用Canvas比较简单,只需实现Left动画从右到左. 弹幕消息使用Border做弹幕背景. 内容使用TextBlock做消息文本展示. 当动画执行完成默认移除Canvas中的弹幕控件. 使用这种方式去加载弹幕GPU会占较高. 1) 准备BarrageExample.xaml如下: <UserControl x:Cla
-
vue 运用mock数据的示例代码
本文介绍了vue 运用mock数据的示例代码,分享给大家,具体如下: 初始化你的项目 话不用啰嗦,首先初始化你的项目,最简单的就是使用vue-cli啦 vue init webpack 引入mock.js 安装 mockjs npm install --save-dev mockjs 引入到Vue原型上,方便使用 import mockjs from 'mockjs' Vue.prototype.$mock = Vue.$mock = mockjs.mock 以上引入到Vue原型上,可以使用 t
-
vue生成随机验证码的示例代码
本文介绍了vue生成随机验证码的示例代码,分享给大家,具体如下: 样式自调,最终效果如图: 实现效果: 点击右边input框会自动切换,如果输入的值与字不同,则清空换一串随机数 HTML <input type="text" placeholder="请输入验证码" class="yanzhengma_input" @blur="checkLpicma" v-model="picLyanzhengma"
随机推荐
- 初识SmartJS - AOP三剑客
- 关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
- Oracle逗号分隔列转行实现方法
- js parseInt("08")未指定进位制问题
- PHP简单实现上一页下一页功能示例
- Lua中__index和__newindex之间的沉默与合作
- SQL Server连接失败错误及解决第1/5页
- SQLSERVER的排序问题结果不是想要的
- js GridView 实现自动计算操作代码
- Serv-U漏洞解析 防患于未然 serv_u安全设置
- Android中访问sdcard路径的几种方式
- C++ 中lambda表达式的编译器实现原理
- iOS socket网络编程实例详解
- 基于C#实现12306的动态验证码变成静态验证码的方法
- C# 反射(Reflection)的用处分析
- Java线程同步Lock同步锁代码示例
- vue.js模仿京东省市区三级联动的选择组件实例代码
- 使用Vue-Router 2实现路由功能实例详解
- Linux下进程数量的限制pid_max的配置方法
- Windows与Linux之间文件传输的方法图解