高度变化,使用transition,没有效果,可以使用max-height替换。

思路:

初始元素max-height:0; 不显示,父元素hover时,重新设置元素的max-height的值,

可以通过el.scrollHeight获取元素的真实高度。

demo:

 <div class='demo'>
<div> this is demo</div>
<div class='content' v-hoverAutoHeight>
this is content;this is content;this is content;
this is content;this is content;this is content;this is content;
</div>
</div>

css:

.demo{
.content{
transition: max-height 1s;
max-height:;
overflow: hidden;
}
&:hover .content{
max-height: var(--max-height);
}
}

js

Vue.directive('hoverAutoHeight', {
inserted(el, binding) {
let maxHeight = el.scrollHeight;
console.log(maxHeight);
el.style.setProperty('--max-height', maxHeight + 'px');
} });

元素高度变化使用动画transition的更多相关文章

  1. 点击单个cell高度变化的动画效果

    点击单个cell高度变化的动画效果 效果 说明 1. 点击单个cell的时候,其展开与缩放动画实现起来是很麻烦的,做过相关需求的朋友一定知道其中的坑 2. 本例子只是提供了一个解决方案,为了简化操作, ...

  2. js监听某个元素高度变化来改变父级iframe的高度

    最近需要做一个iframe调用其他页面内容,这个iframe地址是可变化的,但是里面的内容高度不确定且里面内容高度可调整,所以需要通过监听iframe里面body的高度变化来调整iframe的高度. ...

  3. CSS父元素高度随子元素高度变化而变化

    <html> <body> <head> <style> #menu{width:1000px;overfloat:hidden;} /* width: ...

  4. jquery实现元素高度变化页面变化

    试了几种方法包括有资料说的h5新特性,都没能满足我的需求.我的需求如下: 元素高度是动态可变的,比如可拖动teatarea元素 最后用到了指针监听事件解决了 @参考文档 $(document).mou ...

  5. 修改某个UITextField的键盘的返回键类型以及监听键盘的高度变化,取到键盘动画退出弹出的时间,一起随着键盘顶出来或者压下去,

    1.修改某个UITextField的键盘的返回键类型: [_bottomTextView setReturnKeyType:UIReturnKeyDone]; 1.1.textFied点击return ...

  6. css 动画 transition和animation

    本文参考:http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 1. transition基本用法: < ...

  7. CSS动画-transition/animation

    HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...

  8. 关于隐藏元素高度的问题 css visibility:hidden 与 display:none的区别

    其实这是一个老问题了,s visibility:hidden 与 display:none 共同点就是都会似的元素不可见.但是 visibility:hidden 的DOM元素是占用空间的,会挤占其他 ...

  9. 高度随每片内容的高度变化的swiper react-native-unfixed-height-swiper

    高度随每片内容的高度变化的swiper    react-native-unfixed-height-swiper 内容可以文本 图片 视频 本例里面的为文本 使用方式1. npm i react-n ...

随机推荐

  1. CodeForces - 1051E :Vasya and Big Integers(Z算法 & DP )

    题意:给定字符串S,A,B.现在让你对S进行切割,使得每个切割出来的部分在[A,B]范围内,问方案数. 思路:有方程,dp[i]=Σ dp[j]   (S[j+1,i]在合法范围内).    假设M和 ...

  2. windows命令查看端口占用情况

    打开cmd 查看端口占用情况:netstat -aon 查看PID对应的进程:tasklist /FI "PID eq 16948"

  3. 关于 Nginx 配置的一些疑惑, Nginx 根据cookie 进行rewrite

    网站目录结构如下:/public/en.html/public/zh_cn.html/public/index.php 之前所有的非静态资源请求都交给 index.php现在要把首页的请求 不走PHP ...

  4. 项目(1-1)ES32获取mpu9250数据网页交互显示

    教程 https://www.hackster.io/donowak/esp32-mpu9250-3d-orientation-visualisation-467dc1 项目地址 https://gi ...

  5. [Git] --amend

    Change a Commit Message that Hasn't Been Pushed Yet If you make a mistake in a commit message but HA ...

  6. blockstack与Ethereum

    https://github.com/blockstack https://bihu.com/article/1260288 blockstack是用户登录的认证中心,类似java中的OAuth2进行 ...

  7. The real universe

  8. P5055 【模板】可持久化文艺平衡树 可持久化fhqtreap

    P5055 [模板]可持久化文艺平衡树 链接 luogu 思路 可持久化fhq-treap套一套就行了,pushdown和split都要可持久化,但merge不用可持久.以前以为很难一直没看,就是个板 ...

  9. Android Studio软件技术基础 —Android项目描述---1-类的概念-android studio 组件属性-+标志-Android Studio 连接真机不识别其他途径

    学习android对我来说,就是兴趣,所以我以自己的兴趣写出的文章,希望各位多多支持!多多点赞,评论讨论加关注. 最近有点忙碌,对于我来说,学习Android开发,是对于我的考验,最近一位大佬发给我一 ...

  10. jQuery实现列表框双向选择操作

    对列表框的操作经常碰到过这样的应用:从左侧的列表框中选中要选的项添加到右侧列表框中,然后提交最终选择的项,对误操作而选中的项还可以执行移除操作.在很多系统中应用比如说求职网站的选择意向工作地区,QQ好 ...