时间戳

首页 > 解决方案 > mouserOver 上的动画元素以向下滑动

javascript - mouserOver 上的动画元素以向下滑动

问题描述

我正在处理一个带有一些 h2 和 p 元素的小页面。我有一个看起来像点的 div-Elemnt。每次用户将鼠标移到 h2 元素上时，点元素都会跳到与标题相同的高度。

我使用 Javascript 来解决这个问题。代码按预期工作，但运动看起来像一个跳跃。现在我试图让点的移动看起来像滑下来一样平滑。

我找不到使用 JavaScript 的方法，也不知道如何使用 CSS 解决它。

function moveBulletpoint(id) {
  var elementToBeMoved = document.getElementById("handle");
  elementToBeMoved.style.top = document.getElementById(id).offsetTop + 'px'
}
section {
  display: flex;
}

li {
  list-style: none
}

h2 {
  cursor: pointer;
  margin-bottom: 10px
}

h2:hover {
  opacity: 0.6
}

.gld-line {
  width: 1px;
  background-color: #ededee;
  height: 600px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}

.et_pb_code_inner {
  position: relative;
}

.gld-dot {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #222222;
  z-index: 1;
  top: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  display: block;
  position: relative;
  top: 0;
  transition: 2s left;
}

.gld-line {
  width: 1px;
  background-color: #ededee;
  height: 600px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}
<section>
  <div class="et_pb_code_inner">
    <div id="handle" class="gld-dot"></div>
    <div class="gld-line"></div>
  </div>

  <div style="padding-left: 100px">
    <p>
      <h2 onmouseover="moveBulletpoint(this.id);" id="firstItem">HEADER 1</h2>
      Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero.
    </p>
    <p>
      <h2 onmouseover="moveBulletpoint(this.id);" id="secondItem">HEADER 2</h2>
      Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero.
    </p>

  </div>
</section>

标签： javascripthtmlcss

解决方案

将类的CSS 过渡属性更改为. transition-property是过渡动画的属性。由于您使用但更改没有应用过渡。.gld-dottoplefttop

const handle = document.querySelector('#handle');

const headers = document.querySelectorAll('h2')
  .forEach(el => {
    el.addEventListener('mouseover', e => {
      handle.style.top = `${e.currentTarget.offsetTop}px`;
    });
  });
.gld-dot {
  display: none;
}

section {
  display: flex;
}

li {
  list-style: none
}

h2 {
  cursor: pointer;
  margin-bottom: 10px
}

h2:hover {
  opacity: 0.6
}

.gld-line {
  width: 1px;
  background-color: #ededee;
  height: 600px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}

.et_pb_code_inner {
  position: relative;
}

.gld-dot {
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: #222222;
  z-index: 1;
  top: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  display: block;
  position: relative;
  top: 0;
  transition: top 0.3s;
}

.gld-line {
  width: 1px;
  background-color: #ededee;
  height: 600px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
}
<section>
  <div class="et_pb_code_inner">
    <div id="handle" class="gld-dot"></div>
    <div class="gld-line"></div>
  </div>

  <div style="padding-left: 100px">
    <p>
      <h2>HEADER 1</h2>
      Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero.
    </p>
    <p>
      <h2>HEADER 2</h2>
      Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero.
    </p>

  </div>
</section>

推荐阅读