使用vue中的transition标签实现点击缓慢展开，再点缓慢关闭

<div><div @click="show=!show">我是列表</div><transition name="fade"><p v-if="show">哈哈哈哈哈哈哈的实施交付计划<br>qwkjsjkdhf<br>是的恢复时间规范化建设</p></transition></div>

.fade-enter-active,.fade-leave-active {transition:  all 1s ease;}.fade-enter,.fade-leave-to/* .fade-leave-active below version 2.1.8 */{height: 0;}p{height: 100px;background-color: pink;}

css种fade-enter-active中的fade和html中的name后面的名字一致

使用vue中的transition标签实现点击缓慢展开，再点缓慢关闭相关推荐

vue中使用transition标签底部导航闪烁问题
<transition :name="transitionName" :duration="{ enter: 500, leave: 0 }" > ...
Vue中使用a标签实现点击在新标签页中打开实现照片预览
场景显示某抓拍系统的照片,在点击该照片后面的预览时,在新标签页中打开图片的网络URL地址. 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众 ...
React中Fragment标签和空标签的使用(vue中的template标签类似)
Fragment作用: 类似于vue中的template标签,将当前dom不渲染后页面.在多层循环中可以添加key属性,其他属性不可以添加.不然会警告,提示只能有key属性和children vdom ...
Vue 中利用 template标签遍历多维数组
Vue 中利用 template标签遍历多维数组 1. 需求 2. 二维数组内容 3. 列表渲染指令 v-for 4. template 标签 5. 正确的做法作者:高玉涵时间:2022.7.20 ...
vue中实现tag标签
1,安装scss插件 cnpm i node-sass sass-loader -S 2,安装element-ui cnpm i element-ui -S main.js中引入element-ui ...
Vue中的style标签的lang=“ “和scpoed属性
Vue中的style 的lang=" "和scpoed属性普通的 style 标签只支持普通的样式,如果想要启用 scss 或 less ,需要为 style 元素,设置 lan ...
vue技巧：多标签可点击、选中、样式变化
前言相信大家都使用过 app 的评价功能吧,那下面这张图片你应该很熟悉,今天我们要实现的就是这个需求.首先循环渲染后台返回的数据,这些标签可以点击,点击后会是另一套样式,再次点击恢复默认样式,同时, ...
取消html的a的变颜色属性,H5中取消a标签在点击时的背景颜色的方法
1.取消a标签在移动端点击时的蓝色 a { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-user-select: none ...
vue中的template标签
1.template标签,HTML5提供的新标签,更加规范和语义化 :可以把列表项放入template标签中,然后进行批量渲染 <template id="tem">& ...

使用vue中的transition标签实现点击缓慢展开，再点缓慢关闭

使用vue中的transition标签实现点击缓慢展开，再点缓慢关闭相关推荐

最新文章

热门文章