在带有过渡的按钮悬停上显示其他 div答案

【问题标题】：Display other div on button hover with transition在带有过渡的按钮悬停上显示其他 div
【发布时间】：2023-02-17 03:24:14
【问题描述】：

我真的很难让我的头围绕过渡。我有一个圆形按钮，我希望 div 在按钮悬停时显示。但我想有和“（展开）折叠”效果。你能帮我把动画添加到这个CSS吗？

var btn = document.getElementById("open_feedback_form");
var x = document.getElementById("title");

btn.addEventListener("click", function()  {
  if (x.style.visibility === 'hidden') {
    x.style.visibility = 'visible';
  } else {
    x.style.visibility = 'hidden';
  }
});

.help_button {
    position: fixed;
    bottom: 10rem;
    right: 10rem;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: none;
    box-shadow: 0 0 0 10px rgba(243, 147, 37, 0.4);
    background-color: #F39325;
    font-style: normal;
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 150%;
    color: #ffffff;
}
.feedback-title {
    position: fixed;
    bottom: 10rem;
    right: 12.5rem;
    height: 5rem;
    background-color: #F39325;
    color: #ffffff;
    font-size: 1.6rem;
    line-height: 5rem;
    padding-right:2.5rem;
    padding-left:1rem;
    visibility: hidden;
}

<div class="feedback-title" id="title">Feedback form</div>
<button class="help_button" aria-label="help and feedback form" id="open_feedback_form">
    ?
</button>

我什至不确定我的方法是否正确。

【问题讨论】：

在反馈标题中使用宽度为 0% 到 100% 的过渡，变换原点在右。这种过渡看起来就像从按钮向左弹出的形式。
@VIKESIR 你能帮忙写一些代码吗？我添加了“width:0; transition: width 1s ease-in-out; transform-origin: right;”到标题元素和“.help_button:hover .feedback-title {width:100%;}”，但这显然不是应该做的。

标签： javascript html css

【解决方案1】：

展开效果的最佳实践应该是使用 transform 3d 属性。将反馈表包裹在一个容器中，并将内部元素从 x-as 的 100% 转换为 0%。

【讨论】：

你能给这个添加代码吗？我试图弄清楚这一点，但似乎没有用。

【解决方案2】：

* {
  margin: 0;
  padding: 0;
}

.button-wrapper {
  position: relative;
  display: inline-block;
  margin: 50px;
  cursor: pointer;
}

.button-helper {
  white-space: nowrap;
  position: absolute;
  right: 0;
  top: 50%;
  z-index: -1;
  transform: translate3d(0, -50%, 0);
  transition: .5s ease;
}

.button {
  padding: 10px 30px;
}

.button-wrapper:hover .button-helper {
  transform: translate3d(calc(100% + 15px), -50%, 0);
}

<button class="button-wrapper" type="button">
  <p class="button-helper">Button info label</p>
  <div class="button">
    button text
  </div>
</button>

【讨论】：

【解决方案3】：

以下是仅使用 CSS 和 HTML 的方法：

body{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
}
.help_button {
    display:block;
    box-sizing:border-box;
    position: relative;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    border: none;
    box-shadow: 0 0 0 10px rgba(243, 147, 37, 0.4);
    background-color: #F39325;
    font-style: normal;
    font-weight: 600;
    font-size: 1.6rem;
    color: #ffffff;
   
}
.feedback-title {
    position: absolute;
    right:2.3rem;
    top:0;
    height: 100%
    transform:translate(-5px, -5px);
    background-color: #F39325;
    color: #ffffff;
    font-size: 1.6rem;
    line-height: 5rem;
    padding-right:2.5rem;
    padding-left:1rem;
    z-index:-1;
    opacity:0;
    transition : .5s ease;
    width:12rem;
   
}

.help_button:hover .feedback-title {
   opacity:1;
   
}

<button class="help_button" aria-label="help and feedback form" id="open_feedback_form">
  ?
  <span id="title" class="feedback-title">Feedback from</span>
</button>

【讨论】：