Question

尝试创建如下按钮：https://gyazo.com/9afbd559c15bb707a2d1b24ac790cf7a。现在的代码存在的问题是它可以按预期的方式工作。但是在那之后，它并没有按照意图从左到右，而是从右到左到右。

HTML

<div class="btn-slide block relative mx-auto" style="overflow: hidden; width: 12rem;">
    <span class="z-10">View Pricing</span>
    <span class="slide-bg block absolute transition" style="background-color: rgba(0,0,0,.1); z-index: -1; top: 0; left:-10rem; width: 10rem; height: 3rem;"></span>
</div>

JavaScript

const btns = document.querySelectorAll(".btn-slide");
const slide = document.getElementsByClassName('slide-bg');
btns.forEach(function(btn) {
    btn.addEventListener('mouseout', function () {
        slide[0].style.transform = 'translateX(230%)';
            slide[0].style.transform = 'none';
    })
    btn.addEventListener('mouseover', function() {
        slide[0].style.transform = 'translateX(80%)';
    }, true)
})

Answer 1

除非必须在JavaScript中计算一个值（如元素的高度）。使用CSS类作为修饰符（被隐藏，被折叠，被折叠等）。使用JavaScript，只需添加/删除/切换类

yourElement.addEventListener(
    "mouseenter",
    function (event)
    {
        yourElement.classList.remove("is-collapsed");
    }
);
yourElement.addEventListener(
    "mouseleave",
    function (event)
    {
        yourElement.classList.add("is-collapsed");
    }
);

是折叠的一个例子，根据您的班级命名标准命名。

Answer 2

您可能需要比所显示的代码更多的代码，因为您要执行两项互斥的CSS事情：在mouseenter / mouseout上的“按钮”上切换动画背景，然后将背景重置为其开始位置，该位置绝对不应设置动画。因此，您不仅需要切换背景，还需要切换是否对这些更改进行动画处理。

function setupAnimation(container) {
  const fg = container.querySelector('.label');
  const bg = container.querySelector('.slide-bg');
  const stop = evt => evt.stopPropagation();
  
  // step one: make label text inert. This is critical.
  fg.addEventListener('mouseenter', stop);
  fg.addEventListener('mouseout', stop);

  // mouse enter: start the slide in animation
  container.addEventListener('mouseenter', evt => {
    bg.classList.add('animate');
    bg.classList.add('slide-in');
  });

  // mouse out: start the slide-out animation
  container.addEventListener('mouseout', evt => {
    bg.classList.remove('slide-in');
    bg.classList.add('slide-out');
  });
  
  // when the slide-out transition is done,
  // reset the CSS with animations _turned off_
  bg.addEventListener('transitionend', evt => {
    if (bg.classList.contains('slide-out')) {
      bg.classList.remove('animate');
      bg.classList.remove('slide-out');    
    }
  });
}
  
setupAnimation(document.querySelector('.slide'));

.slide {
  position: relative;
  overflow: hidden;
  width: 12rem;
  height: 1.25rem;
  cursor: pointer;
  border: 1px solid black;
  text-align: center;
}

.slide span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.slide-bg {
  background-color: rgba(0,0,0,.1);
  transform: translate(-100%, 0);
  transition: none;
  z-index: 0;
}

.slide-bg.animate {
  transition: transform 0.5s ease-in-out;
}

.slide-bg.slide-in {
  transform: translate(0%, 0);
}

.slide-bg.slide-out {
  transform: translate(100%, 0);
}

<div class="slide">
    <span class="label">View Pricing</span>
    <span class="slide-bg"></span>
</div>

由于浏览器对快速连续的mouseenter / mouseout事件表现出挑剔，这取决于您移动光标的速度，这甚至可能还不够：您可能还很需要“步进”跟踪器，以便JS知道哪一部分当前动画总数的当前有效状态，如果slide-in过渡结束时光标实际上（仍然）在顶部容器（或再次）上方，则不会触发鼠标移出代码。

Answer 3

我建议您使用.on事件监听器

$('').on("mouseentre","elem",function(){$('').toggleclass('.classname')})
$('').on("mouseleave","elem",function(){$('').toggleclass('.classname')})

然后您可以将CSS类切换到函数中的元素

toggle类将类的css添加到您的jquery选择中，您可以多次执行并在css类中具有动画的关键帧

关键帧是实现动画的好方法，并且在所有浏览器中都受支持

如何在javascript中的mouseout事件后使元素重置其位置

3 个答案: