JS+CSS3 實現圖片滑塊效果

效果

分析該動畫，可拆分紅兩個步驟：

• 鼠標移入或者移出時，添加一個動畫 class
• 實現該動畫 class，實現移入移出動畫

圖片瀑布流佈局可參考 Vue 手寫圖片瀑布流組件(附源碼)

HTML 和 CSS 佈局

佈局比較簡單，一個父容器 ，裏面一個 mask div，一個 img div

<div class="photo_item" style="max-width:200px;">
  <div class="photo_mask"></div>
  <img src="http://photo.tuchong.com/2732846/ft640/20811104.webp">
</div>

佈局，父容器設置 position: relative; 子 mask 容器設置 position: absolute;並撐滿整個容器

編寫動畫 class，不妨讓左滑入 class 爲 enter_left，則左邊動畫可寫爲：

.enter_left {
  animation: enter-left 0.3s ease-in;
}

@keyframes enter-left {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

剛開始讓 mask 置於父容器外，100%時恰好到達父容器右邊界，同理很容易寫出各個方向的 css 動畫

JS 判斷滑塊方向

上一步咱們已經完成了一大半，寫出了各個方向的動畫，難點是如何判斷鼠標進入容器的方向

咱們能夠畫圖分析，以下圖：

假設該矩形的中心點座標爲 x0(x0,y0),鼠標進出矩形的邊界座標點爲 x(x,y)

根據斜率公式，能夠獲得:

• l1 斜率： k0 = height/width
• l2 斜率： -k0
• l3 斜率： k=(y-y0)/(x-x0)

觀察圖形可知，l1 和 l2 把矩形分紅了 4 個塊，咱們很容易獲得：

若 鼠標從右邊進出，根據斜率： k>=-k0 && k<=k0，且 x > x0;
根據對稱性，若鼠標從左邊進出，則： k>=-k0 && k<=k0，且x < x0;

......

---

開始寫 js 邏輯，綁定鼠標移入移出事件

<div class="photo_item" style="max-width:200px;" @mouseenter="(event)=>imgEventHandle(event,true)" @mouseleave="(event)=>imgEventHandle(event,false)">
  <div class="photo_mask"></div>
  <img src="http://photo.tuchong.com/2732846/ft640/20811104.webp">
</div>

注意：不要用 mouseout 和 mouseover 事件，該事件會致使鼠標滑入子元素時也觸發鼠標事件

使用 event.target.getBoundingClientRect()得到當前鼠標的相信信息；

Element.getBoundingClientRect() 方法返回元素的大小及其相對於視口的位置。返回值是一個 DOMRect 對象，返回的結果是包含完整元素的最小矩形，而且擁有 left, top, right, bottom, x, y, width, 和 height 這幾個以像素爲單位的只讀屬性用於描述整個邊框。

直接給出該部分邏輯代碼

imgEventHandle(event: any, is_enter: boolean) {
  let direction_index: number;
  const direction_list: Array<string> = ['top', 'right', 'bottom', 'left'];
  const x: number = event.clientX;
  const y: number = event.clientY;
  // 中點座標
  const rect_dom: any = event.target.getBoundingClientRect();
  const x0: number = rect_dom.left + rect_dom.width / 2;
  const y0: number = rect_dom.top + rect_dom.height / 2;
  const k0 = (rect_dom.height) / (rect_dom.width);
  // 當前鼠標點斜率
  const k = (y - y0) / (x - x0);
  if (k <= k0 && k >= -k0) {
    // 左右進出
    direction_index = x >= x0 ? 1 : 3;
  } else {
    // 上下進出
    direction_index = y >= y0 ? 2 : 0;
  }
  direction_list.forEach(item => {
    event.target.childNodes[0].classList.remove(`${is_enter ? 'leave' : 'enter'}_${item}`);
  });
  event.target.childNodes[0].classList.add(`${is_enter ? 'enter' : 'leave'}_${direction_list[direction_index]}`);
}

完整代碼

<template>
  <div style="max-width:1366px;margin:0 auto;">
    <div class="photo_item" style="max-width:200px;" @mouseenter="(event)=>imgEventHandle(event,true)" @mouseleave="(event)=>imgEventHandle(event,false)">
      <div class="photo_mask"></div>
      <img src="http://photo.tuchong.com/2732846/ft640/20811104.webp">
    </div>
  </div>
</template>

<script lang="ts">
/* eslint-disable @typescript-eslint/no-explicit-any */
import { Vue, Component } from 'vue-property-decorator';

@Component({})
export default class Debug extends Vue {
  // eslint-disable-next-line class-methods-use-this
  imgEventHandle(event: any, is_enter: boolean) {
    let direction_index: number;
    const direction_list: Array<string> = ['top', 'right', 'bottom', 'left'];
    const x: number = event.clientX;
    const y: number = event.clientY;
    // 中點座標
    const rect_dom: any = event.target.getBoundingClientRect();
    const x0: number = rect_dom.left + rect_dom.width / 2;
    const y0: number = rect_dom.top + rect_dom.height / 2;
    const k0 = (rect_dom.height) / (rect_dom.width);
    // 當前鼠標點斜率
    const k = (y - y0) / (x - x0);
    if (k <= k0 && k >= -k0) {
      // 左右進出
      direction_index = x >= x0 ? 1 : 3;
    } else {
      // 上下進出
      direction_index = y >= y0 ? 2 : 0;
    }
    direction_list.forEach(item => {
      event.target.childNodes[0].classList.remove(`${is_enter ? 'leave' : 'enter'}_${item}`);
    });
    event.target.childNodes[0].classList.add(`${is_enter ? 'enter' : 'leave'}_${direction_list[direction_index]}`);
  }
}
</script>

<style lang="scss" scoped>
.photo_item {
  position: relative;
  break-inside: avoid;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 10px 10px 5px #ccc;
  &:hover {
    .photo_mask {
      z-index: 1;
    }
  }
  img {
    width: 100%;
  }
  .photo_mask {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    &.enter_top {
      animation: enter-top 0.3s ease-in;
    }
    &.leave_top {
      animation: leave-top 0.3s ease-out;
    }
    &.enter_right {
      animation: enter-right 0.3s ease-in;
    }
    &.leave_right {
      animation: leave-right 0.3s ease-out;
    }
    &.enter_bottom {
      animation: enter-bottom 0.3s ease-in;
    }
    &.leave_bottom {
      animation: leave-bottom 0.3s ease-out;
    }
    &.enter_left {
      animation: enter-left 0.3s ease-in;
    }
    &.leave_left {
      animation: leave-left 0.3s ease-out;
    }
  }
}
@keyframes enter-top {
  0% {
    z-index: -1;
    transform: translate3d(0, -100%, 0);
  }
  100% {
    z-index: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes leave-top {
  0% {
    z-index: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    z-index: -1;
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes enter-right {
  0% {
    z-index: -1;
    transform: translate3d(100%, 0, 0);
  }
  100% {
    z-index: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes leave-right {
  0% {
    z-index: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    z-index: -1;
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes enter-bottom {
  0% {
    transform: translate3d(0, 100%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes leave-bottom {
  0% {
    z-index: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    z-index: -1;
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes enter-left {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
@keyframes leave-left {
  0% {
    z-index: 1;
    transform: translate3d(0, 0, 0);
  }
  100% {
    z-index: -1;
    transform: translate3d(-100%, 0, 0);
  }
}
</style>

---

END