[test25] :hoverに設定したtransitionを止めない

1.基本

1-1.画面にマウスを乗せると画像がスライドイン

<style>
.sample {
  overflow: hidden;
}
.sample img {
  width: 100%;
  height: 100%;
  transform: translateY(-100%);
  transition: transform .2s;
  transition-delay: 3s;
}
.sample:hover img {
  transform: translateY(0);
  transition-delay: 0s;
}
</style>
<div class="sample">
<img src="https://placehold.jp/100x100.png">
</div>

• codepen

See the Pen test25-1 by yambe jp (@yambejp) on CodePen.

1-2.課題

一瞬だけ画面にマウスを乗せ、外すとスライドが止まってしまう

■理由
→擬似クラス:hoverが外れることでtransitionがcancelされてしまうから
→transitioncancelイベントで拾ってみる
→ささっと乗せてはずすと「cancel」というalertが表示される

• codepen

See the Pen test25-2 by yambe jp (@yambejp) on CodePen.

1-3.対策

「:hover」が外れてしまうのが問題であればクラスを付加すればよい
「.sample」にmouseoverしたときに「hover」クラスを付加
cssも調整

<style>
.sample {
  overflow: hidden;
}
.sample img {
  width: 100%;
  height: 100%;
  transform: translateY(-100%);
  transition: transform .2s;
  transition-delay: 3s;
}
.sample:hover img ,
.sample.hover img { /* 「.hover」を「:hover」と同等に扱う
  transform: translateY(0);
  transition-delay: 0s;
}
</style>
<script>
document.addEventListener('mouseover',({target})=>{
  if(target.matches('.sample')){
    target.classList.add('hover');
  }
});
</script>
<div class="sample">
<img src="https://placehold.jp/100x100.png">
</div>

1-4.課題

付加するだけなのでhoverクラスが消えずにスライドアウトしなくなってしまう。
であれば、mouseout時にhoverを消せばいいのでは

document.addEventListener('mouseout',({target})=>{
  if(target.matches('.sample')){
    target.classList.remove('hover');
  }
});

実際にコレでは:hoverも.hoverも両方はずれてしまうので元の状態と変わらない

1-5.対策

:hoverするとtransitionが始まるのであれば、mouseoutではなくtransitionendで.hoverを外せば良い

• codepen

See the Pen test25-3 by yambe jp (@yambejp) on CodePen.

1-6.完成

上記、動作で想定通り