m0_73327575 2025-02-14 14:46 采纳率: 25%
浏览 7

平滑，过渡，折叠，动画

要实现的具体效果是第一张图片有两个盒子，上面都有一个按钮，点击其中一个按钮，出现的第一个动画是第一张图片的两个盒子都占满全屏，第二个画面，我点击的那个按钮对应的盒子会占满全屏，然后沿着这个盒子平滑过渡出两个盒子，还带有一种折叠的效果，可以再给我提供一个更完善的代码吗

img


img

  • 写回答

7条回答 默认 最新

  • 阿里嘎多学长 2025-02-14 14:46
    关注

    阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

    解决方案

    你想要实现一个平滑过渡的动画效果，点击按钮后，两个盒子会占满全屏，然后沿着点击的盒子平滑过渡。可以使用 CSS3 的 transition 和 animation 属性来实现。

    首先，需要给盒子添加类名，例如 .box，然后在 CSS 中定义 transition 和 animation 属性：

    .box {
  transition: all 0.5s ease-in-out;
  animation: slideIn 0.5s forwards;
}

.box.active {
  animation: slideOut 0.5s forwards;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

    然后，在 HTML 中添加按钮和盒子：

    <div class="box">
  <button>按钮 1</button>
  <div class="inner">内容 1</div>
</div>
<div class="box">
  <button>按钮 2</button>
  <div class="inner">内容 2</div>
</div>

    最后，在 JavaScript 中添加点击事件，切换盒子的类名：

    const boxes = document.querySelectorAll('.box');

boxes.forEach((box) => {
  box.addEventListener('click', () => {
    box.classList.toggle('active');
  });
});

    这样，当你点击按钮时，盒子会占满全屏，然后沿着点击的盒子平滑过渡。

    代码示例

    你可以查看以下代码示例：

    <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>平滑过渡动画</title>
  <style>
    .box {
      transition: all 0.5s ease-in-out;
      animation: slideIn 0.5s forwards;
      width: 50%;
      height: 100vh;
      background-color: #f0f0f0;
      position: relative;
    }
    .box.active {
      animation: slideOut 0.5s forwards;
    }
    @keyframes slideIn {
      from {
        transform: translateX(-100%);
      }
      to {
        transform: translateX(0);
      }
    }
    @keyframes slideOut {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(100%);
      }
    }
  </style>
</head>
<body>
  <div class="box">
    <button>按钮 1</button>
    <div class="inner">内容 1</div>
  </div>
  <div class="box">
    <button>按钮 2</button>
    <div class="inner">内容 2</div>
  </div>
  <script>
    const boxes = document.querySelectorAll('.box');

    boxes.forEach((box) => {
      box.addEventListener('click', () => {
        box.classList.toggle('active');
      });
    });
  </script>
</body>
</html>

    这个示例代码展示了如何使用 CSS3 的 transition 和 animation 属性来实现平滑过渡动画效果。

    评论

报告相同问题？

  • 常用的折叠展开过渡动画效果css
    2025-07-18 17:51
    王旭晨的博客 本文介绍了如何使用HTML、CSS和JavaScript实现平滑的折叠展开动画效果。通过CSS的transition属性控制max-height和padding变化，结合JavaScript切换类名来触发动画。关键点包括：使用max-height而非height实现灵活的...
  • jQuery动画标签折叠式菜单
    2021-04-02 02:32
    在折叠式菜单中，`.animate()`可以用于控制菜单项展开和收起时的平滑过渡，使得用户感受到流畅的视觉体验。 折叠菜单，也称为 accordions 或者 tabbed navigation，是一种节省空间的导航方式，尤其适用于内容丰富的...
  • vuejs用于开发支持折叠/展开的动画效果的组件
    2025-11-11 16:50
    这种设计思路确保了动画效果的平滑过渡和操作逻辑的一致性。通过实践分析可以看出，在Vue.js框架下结合CSS3技术实现折叠面板动画方案是切实可行的，并且具有较高的可扩展性和维护性。本文末尾对读者提出了建设性的...
  • Web前端动画实战[可运行源码]
    2025-11-13 07:50
    例如，CSS3的动画和过渡功能提供了强大的工具来创建平滑的动态效果，而无需依赖JavaScript或者复杂的脚本。同时，JavaScript框架和库的崛起，如本文提到的jQuery、React和Vue.js，为开发者提供了更加丰富和灵活的...
  • 详解css3 Transition属性（平滑过渡菜单栏案例）
    2020-09-24 20:05
    《CSS3 Transition属性详解——以平滑过渡菜单栏为例》 在现代网页设计中，CSS3的Transition属性为我们提供了创建动态、平滑过渡效果的能力，极大地丰富了用户体验。Transition属性是CSS3动画三大核心技术之一...
  • 3D纸片折叠动画特效代码
    2021-03-20 02:07
    在IT行业中，3D纸片折叠动画特效是一种利用前端技术实现的创新视觉表现形式，它主要基于HTML5和CSS3的特性。这种动画效果能够为网页增加动态的、立体感十足的元素，使得用户界面更加生动有趣。接下来，我们将详细...
  • jQuery动画标签折叠式菜单.zip
    2022-11-20 22:08
    同时，通过CSS3的transition和transform属性，可以实现平滑的动画效果，例如菜单项展开或折叠时的过渡动画。使用:hover伪类，我们可以设置当鼠标悬停在菜单项上时，菜单项的样式变化，为用户提供视觉反馈。 然后，...
  • 15个有动画过渡效果的手机导航菜单特效
    2020-06-05 21:13
    这些特效菜单可能具有可折叠的子菜单、触发动画的图标以及响应式布局，确保在不同设备上都能良好显示。 4. **多样的过渡类型**： 这15个示例涵盖了多种过渡类型，如平滑的滑动效果（example3.html）、渐变透明度...
  • 如何使用 CSS 实现一个可展开和收缩的侧边栏菜单，要求有平滑的过渡动画。
    2025-04-08 19:47
    前端布洛芬的博客 咱今儿就来搞一搞怎么用 CSS 做一个能展开和收缩的侧边栏菜单，还得带上平滑的过渡动画，这玩意儿做好了，那页面交互感直接就上去了！快去试试吧，让你的页面更有交互性！复杂的过渡效果可能会在性能较低的设备上...
  • 前端 Bootstrap 折叠组件的灵活运用
    2025-07-16 16:00
    AI架构全栈开发实战笔记的博客 本文旨在全面介绍Bootstrap框架中的折叠(Collapse)组件，帮助前端开发者理解其工作原理并掌握灵活运用的技巧。内容涵盖基础实现、高级定制、性能优化以及与其他组件的协同使用。核心概念与联系：解释折叠组件的基本...
  • 没有解决我的问题, 去提问

问题事件

  • 创建了问题 2月14日