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

# 1.基本

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

```html
<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](https://codepen.io/yambejp/pen/jORjOzo)
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="jORjOzo" data-user="yambejp" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yambejp/pen/jORjOzo">
  test25-1</a> by yambe jp (<a href="https://codepen.io/yambejp">@yambejp</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## 1-2.課題
一瞬だけ画面にマウスを乗せ、外すとスライドが止まってしまう

■理由
→擬似クラス:hoverが外れることでtransitionがcancelされてしまうから
→transitioncancelイベントで拾ってみる
→ささっと乗せてはずすと「cancel」というalertが表示される
- [codepen](https://codepen.io/yambejp/pen/YzMozRe)

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="YzMozRe" data-user="yambejp" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yambejp/pen/YzMozRe">
  test25-2</a> by yambe jp (<a href="https://codepen.io/yambejp">@yambejp</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

## 1-3.対策
「:hover」が外れてしまうのが問題であればクラスを付加すればよい
「.sample」にmouseoverしたときに「hover」クラスを付加
cssも調整
```html
<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を消せばいいのでは
```javascript
document.addEventListener('mouseout',({target})=>{
  if(target.matches('.sample')){
    target.classList.remove('hover');
  }
});

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

## 1-5.対策
:hoverするとtransitionが始まるのであれば、mouseoutではなくtransitionendで.hoverを外せば良い
- [codepen](https://codepen.io/yambejp/pen/dyLBPPe)

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="dyLBPPe" data-user="yambejp" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yambejp/pen/dyLBPPe">
  test25-3</a> by yambe jp (<a href="https://codepen.io/yambejp">@yambejp</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>

## 1-6.完成
上記、動作で想定通り