网站建设合作范本,如何分析网站的设计,的建站网站,自己办网站在开发中#xff0c;我们可能会遇到需要让卡片高度由内容撑起#xff08;即不能手动设置height#xff09;#xff0c;并且在高度增加时增加缓动动画的需求。本文将介绍几种实现方式。 文章目录方法1#xff1a;使用CSS的max-height属性和:hover伪类特定例子#xff1a;鼠… 在开发中我们可能会遇到需要让卡片高度由内容撑起即不能手动设置height并且在高度增加时增加缓动动画的需求。本文将介绍几种实现方式。 文章目录方法1使用CSS的max-height属性和:hover伪类特定例子鼠标悬浮卡片显隐按钮方法2使用JavaScript监听卡片内容变化方法3使用CSS的transform属性方法1使用CSS的max-height属性和:hover伪类
我们可以使用CSS的max-height属性和:hover伪类来实现卡片高度增加时的缓动动画效果。
ps为什么不使用transition:height 1s。因为我们卡片的高度靠内容填充非CSS限定故transitionheight的组合会失效。
具体实现步骤如下
在CSS中设置卡片的max-height属性为一个较大的值比如500px。
.card {max-height: 500px;transition: max-height .2s ease-in-out;
}在:hover时将max-height设置为实际高度或以上。
.card:hover {max-height: 1000px; /* 实际高度 */
}这样当鼠标悬停在卡片上时卡片会平滑地从当前高度过渡到实际高度实现了缓动动画效果。
Tip1比较好的效果是设置到实际的大概高度以上这样缓动更加平滑。
特定例子鼠标悬浮卡片显隐按钮
Tip2最好的效果是将限制设置在动态增长的子元素上而不是card上。
实例限制button的最大高度即可。 核心代码
.btn-group{max-height:0px;overflow:hidden;transition:max-height 0.8s;
}
.card:hover .btn-group{max-height:70px;
}具体代码可见Codepen:https://codepen.io/yyforreal/pen/RwxxZXN
方法2使用JavaScript监听卡片内容变化
我们可以使用JavaScript监听卡片内容的变化并在内容发生变化时更新卡片的高度并增加缓动动画效果。
具体实现步骤如下
获取卡片元素和卡片内容元素。
const card document.querySelector(.card);
const cardContent document.querySelector(.card-content);获取卡片内容元素的高度并将卡片元素的高度设置为卡片内容元素的高度。
const contentHeight cardContent.offsetHeight;
card.style.height ${contentHeight}px;监听卡片内容元素的变化并根据内容高度的变化来更新卡片的高度。
const observer new MutationObserver(() {const newContentHeight cardContent.offsetHeight;if (newContentHeight ! contentHeight) {card.style.height ${newContentHeight}px;}
});
observer.observe(cardContent, { childList: true, subtree: true });在CSS中设置卡片的过渡效果。
.card {transition: height .2s ease-in-out;
}这样当卡片内容发生变化时卡片的高度会自动调整并且会有过渡效果实现缓动动画。
方法3使用CSS的transform属性
我们还可以使用CSS的transition和transform属性来实现缓动动画效果。
具体实现步骤如下
在CSS中设置卡片的transform属性为scaleY(0)和scaleY(1)并且设置transform-origin为top。
.card {transform: scaleY(0);transform-origin: top;transition: transform .2s ease-in-out;
}
.card.show {transform: scaleY(1);
}使用JavaScript监听卡片内容的变化并在内容发生变化时将卡片的class设置为show。这样卡片就会从高度为0的状态缓动到实际高度的状态。
const card document.querySelector(.card);
const cardContent document.querySelector(.card-content);new MutationObserver(() {card.classList.add(show);
}).observe(cardContent, { childList: true, subtree: true });这样就可以实现卡片高度增加时的缓动动画效果了。
以上就是几种实现卡片高度增加时的缓动动画效果的方法开发时可以根据实际需求选择适合的方式。
