Question

上下文：我在悬停时操纵div的大小，以及点击时的位置。我正在使用CSS转换属性来完成这两件事。

问题：我希望此div的大小和位置更改的转换时间不同（主要用于返回转换）。但是，这两种操作都涉及相同的CSS属性。

问题：如何隔离/分离转换时间？

[此处的示例代码] [1]

document.querySelector('div').addEventListener('click', function(event) {
  event.currentTarget.classList.toggle('shifted');
})

div {
  width: 30px;
  height: 30px;
  background: green;
  transition: transform 0.5s;
  //i would like for the div to move back in 1 second when .shifted is removed
}

div:hover {
  transform: scale(1.5);
  transition: transform 0.5s;
}

.shifted {
  transform: translateX(50px);
  transition: transform 1s;
}

<div></div>

Answer 1

你需要添加一些逻辑来检查div是否有类，如果没有，那么它会在1秒后删除'shift'类。

你还需要在'shift'上悬停一个伪，以防止div来回晃动。

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>

<style>
div {
  width: 30px;
  height: 30px;
  background: green;
  transition: transform 0.5s;
}
div:hover {
  transform: scale(1.5);
  transition: transform 0.5s;
}
.shifted {
  transform: translateX(50px);
  transition: transform 0.5s;
}

div.shifted:hover{
    transform: translateX(50px);
}
</style>

<div></div>

<script>

$(document).ready(function(){

$('div').click(function(){
  if(!$(this).hasClass('shifted')){
    $(this).addClass('shifted')
  }else{
    setTimeout(function(){$('div').removeClass('shifted')},1000)  
  }
})

})//doc ready

</script>

</body>
</html>

Answer 2

你可以使用一些javascript来协助你的CSS过渡。

这里是JsFiddle：
https://jsfiddle.net/gngLqzor/6/

<强> HTML

(4==1)

<强> CSS

<div class="box"></div>

<强> JS

.box {
  width: 30px;
  height: 30px;
  background: green;
  transform: translateX(0) scale(1);
  transition: transform .5s;
}

.box.hovered {
  transform: translateX(0) scale(1.5);
}

.box.shifted {
  transform: translateX(50px) scale(1);
}

.box.shifted.hovered {
  transform: translateX(50px) scale(1.5);
}

您会注意到我没有使用CSS悬停。这是因为如果您在点击后没有立即移动鼠标，则即使在移动后，悬停也会应用于该框。这就是为什么var boxShiftTimeout, box = document.querySelector('.box'), stateClasses = { hovered: 'hovered', shifted: 'shifted' }; box.addEventListener('click', onBoxClick); box.addEventListener('mouseenter', onBoxMouseenter); box.addEventListener('mouseleave', onBoxMouseleave); function onBoxClick() { var el = this; if (boxShiftTimeout) { return; } if (el.classList.contains(stateClasses.shifted)) { boxShiftTimeout = window.setTimeout(function () { el.classList.remove(stateClasses.hovered); el.classList.remove(stateClasses.shifted); boxShiftTimeout = null; }, 1000); } else { el.classList.remove(stateClasses.hovered); el.classList.add(stateClasses.shifted); } } function onBoxMouseenter() { this.classList.add(stateClasses.hovered); } function onBoxMouseleave() { this.classList.remove(stateClasses.hovered); }类在应用hovered类之前被删除的原因。

CSS：将悬停动画与其他与类相关的动画分开

2 个答案: