求助前端大手子, 如何添加位置移动的动画 已解决

开发调优
,
1

这是我的最小的 demo, 我该如何为 header 的初始状态, browser chat, 模式, 这几个状态随意切换时, 为其位置移动添加移动的丝滑的动画,

我觉得坑比较大的是, 因为 class 中 position 有变化导致的

https://codepen.io/borber/pen/QwbeQzW

1 Like
2

招呼大鹅佬 @Clarke.L

1 Like
3

你的动画效果已经添加上了。你只需要通过同一个属性来控制位置
例如：
/* :speech_balloon: 状态三: 聊天模式 */
.header-container.chat {
position: absolute;
bottom: 40px;
}
把这个bottom改成top

4

你压根没理解题意

5

@Clarke.L

1 Like
7 
.header-container {
  position: absolute;
  left: 50%;
  top:0;
  transform: translate(-50%, 0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 60%;
  z-index: 1000;
  user-select: none;
  -webkit-user-select: none;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  color: #333;
  transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.header-container.initial {
  transform: translate(-50%, 0);
}
.header-container.browser {
  transform: translate(-50%, calc(50vh - 50%));
}

.header-container.chat {
  transform: translate(-50%, calc(100vh - 100% - 30px));
}
1 Like
8

感谢大佬 已解决

9

这不给佬友安排个解决方案

10

你点进去那个连接, 有最新的代码

11

我是指上面的佬友既然解决， 可以加个快问快打标签，给佬友的回答加个“解决方案” :laughing:

13

OK了 哈哈哈