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

Question

Context : I'm manipulating a div's size on hover, as well as its position when clicked. 上下文 ：我在悬停时操纵div的大小以及单击时的位置。 I'm using the CSS transform property to accomplish these 2 things. 我正在使用CSS transform属性来完成这两项工作。

Issue : I want a different transition timing for this div for size and position changes (primarily for the returning transition). 问题：我希望此div的大小和位置更改（主要是返回的过渡）具有不同的过渡时间。 However, both manipulations involve the same CSS property. 但是，这两种操作都涉及相同的CSS属性。

Question : How do I isolate/separate transition timing? 问题：如何隔离/分隔过渡时间？

[Sample code here][1] [此处是示例代码] [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

You need to add some logic which checks if the div has the class and if it doesn't then it will remove the 'shifted' class after 1 sec. 您需要添加一些逻辑来检查div是否具有该类，如果没有，则它将在1秒钟后删除“ shifted”类。

You also need a pseudo of hover on the 'shifted' to keep the div from flicking back and forth. 您还需要在“平移”上悬停一个伪指令，以防止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

You can have some javascript to assist with your CSS transitions. 您可以使用一些JavaScript来辅助CSS过渡。

Here's the JsFiddle: 这是JsFiddle：
https://jsfiddle.net/gngLqzor/6/ https://jsfiddle.net/gngLqzor/6/

HTML 的HTML

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

CSS 的CSS

.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);
}

JS JS

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);
}

You will notice that I don't use CSS hover. 您会发现我不使用CSS悬停。 This is because if you don't move the mouse right after the click, hover gets applied to the box even after it has been shifted. 这是因为，如果您单击鼠标后没有立即移动鼠标，则即使在移动鼠标后，鼠标悬停也会应用到该盒子。 That's why the hovered class gets removed before applying the shifted class. 这就是为什么在应用shifted类之前删除了hovered类的原因。

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

问题描述

2 个解决方案

解决方案1
0 2017-10-02 00:15:46

解决方案2
0 2017-10-02 02:25:29

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

问题描述

2 个解决方案

解决方案1 0 2017-10-02 00:15:46

解决方案2 0 2017-10-02 02:25:29

解决方案1
0 2017-10-02 00:15:46

解决方案2
0 2017-10-02 02:25:29