首页 前端知识 实现卡片高度增加时的缓动动画效果

实现卡片高度增加时的缓动动画效果

2024-02-03 12:02:16 前端知识 前端哥 293 549 我要收藏

在开发中,我们可能会遇到需要让卡片高度由内容撑起(即不能手动设置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限定,故transition+height的组合会失效

具体实现步骤如下:

  1. 在CSS中设置卡片的max-height属性为一个较大的值,比如500px。
.card {
  max-height: 500px;
  transition: max-height .2s ease-in-out;
}
  1. 在: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监听卡片内容的变化,并在内容发生变化时更新卡片的高度并增加缓动动画效果。

具体实现步骤如下:

  1. 获取卡片元素和卡片内容元素。
const card = document.querySelector('.card');
const cardContent = document.querySelector('.card-content');
  1. 获取卡片内容元素的高度,并将卡片元素的高度设置为卡片内容元素的高度。
const contentHeight = cardContent.offsetHeight;
card.style.height = `${contentHeight}px`;
  1. 监听卡片内容元素的变化,并根据内容高度的变化来更新卡片的高度。
const observer = new MutationObserver(() => {
  const newContentHeight = cardContent.offsetHeight;
  if (newContentHeight !== contentHeight) {
    card.style.height = `${newContentHeight}px`;
  }
});
observer.observe(cardContent, { childList: true, subtree: true });
  1. 在CSS中设置卡片的过渡效果。
.card {
  transition: height .2s ease-in-out;
}

这样当卡片内容发生变化时,卡片的高度会自动调整,并且会有过渡效果实现缓动动画。

方法3:使用CSS的transform属性

我们还可以使用CSS的transition和transform属性来实现缓动动画效果。

具体实现步骤如下:

  1. 在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);
}
  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 });

这样就可以实现卡片高度增加时的缓动动画效果了。

以上就是几种实现卡片高度增加时的缓动动画效果的方法,开发时可以根据实际需求选择适合的方式。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1160.html
标签
评论
发布的文章

jQuery ---- 插件

2024-02-15 14:02:06

CSS-JavaScript-Jquery-Servlet

2024-02-15 14:02:00

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!