javascript - 左右增长css动画

Question

我正在尝试创建一个包含 2 个按钮的 div。一个在左边，一个在右边。当您将鼠标悬停在框中时，我希望这两个按钮在 div 中呈现从各自侧面向内增长的外观。我已经编写了我希望它看起来像的代码，除非这些按钮在 div 之外，我不希望 div 之外的部分可见。任何帮助将不胜感激。

const $box = document.querySelector('.box');
const $leftButton = document.querySelector('.button-left');

const $rightButton = document.querySelector('.right');

$box.addEventListener('mouseenter', () => {
  $rightButton.classList.add('right-button-transform') 
  $leftButton.classList.add('left-button-transform');
  
})

$box.addEventListener('mouseleave', () => {
  $leftButton.classList.remove('left-button-transform');
  $rightButton.classList.remove('right-button-transform') 
})

.box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  height: 100px;
  border-left: 1px solid rgba(201, 137, 211, 0.3);
    border-right: 1px solid rgba(186, 167, 252, 0.5);
    border-bottom: 1px solid rgba(186, 167, 252, 0.5);
  margin: 0 auto;
}

.button-left {
  display: grid;
  
  place-items: center;
  height: 50%;
  padding-left: 30px;
  padding-right: 30px;
  background: linear-gradient(
      90deg,
      rgba(201, 137, 211, 0.3) 0%,
      rgba(186, 167, 252, 0.5) 100%
    ) !important;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  transform: translateX(-90%);
  transition: all 1s ease-in;
}

.left-button-transform {
  transform: translateX(0%)
}

.right-button-transform {
  transform: translateX(0%)
}

.right {
  display: grid;
  place-items: center;
  height: 50%;
  padding-left: 30px;
  padding-right: 30px;
   background: linear-gradient(
      90deg,
      rgba(201, 137, 211, 0.3) 0%,
      rgba(186, 167, 252, 0.5) 100%
    ) !important;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  transform: translateX(90%);
  transition: all 1s ease-in;
}

<div class="box">
  <div class="button-left">+</div>
  <div class="right">x</div>
</div>

标签： javascriptcss

Answer 1

只是CSS 优先级的问题。将您的动画类移动到底部。

对于隐藏元素，您可以overflow: hidden;在父元素上使用，即.box元素。

const $box = document.querySelector('.box');
const $leftButton = document.querySelector('.button-left');

const $rightButton = document.querySelector('.right');

$box.addEventListener('mouseenter', () => {
  $rightButton.classList.add('right-button-transform')
  $leftButton.classList.add('left-button-transform');

})

$box.addEventListener('mouseleave', () => {
  $leftButton.classList.remove('left-button-transform');
  $rightButton.classList.remove('right-button-transform')
})

.box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  height: 100px;
  border-left: 1px solid rgba(201, 137, 211, 0.3);
  border-right: 1px solid rgba(186, 167, 252, 0.5);
  border-bottom: 1px solid rgba(186, 167, 252, 0.5);
  margin: 0 auto;
  overflow: hidden
}

.button-left {
  display: grid;
  place-items: center;
  height: 50%;
  padding-left: 30px;
  padding-right: 30px;
  background: linear-gradient( 90deg, rgba(201, 137, 211, 0.3) 0%, rgba(186, 167, 252, 0.5) 100%) !important;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  transform: translateX(-90%);
  transition: all 1s ease-in;
}

.right {
  display: grid;
  place-items: center;
  height: 50%;
  padding-left: 30px;
  padding-right: 30px;
  background: linear-gradient( 90deg, rgba(201, 137, 211, 0.3) 0%, rgba(186, 167, 252, 0.5) 100%) !important;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  transform: translateX(90%);
  transition: all 1s ease-in;
}

.left-button-transform {
  transform: translateX(0%)
}

.right-button-transform {
  transform: translateX(0%)
}

<div class="box">
  <div class="button-left">+</div>
  <div class="right">x</div>
</div>