添加常见一些动画问题

如果没有一些花里胡哨的操作，那么有什么意义呢，那么我会在这篇文章文章记录我搬运过来的笔记

1.鼠标经过添加下划线

<div class="page">
    <div class="text">测试文字</div>
  </div>
.page {
  .text {
    position: relative;
    display:inline-block;
    padding: 5px;
    &::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 2px;
      bottom: 0;
      left: 0;
      transition: all 0.3s ease-in-out;
      transform: scaleX(0);
      transform-origin: right;
    }
    &:hover {
      &::after {
        transform: scaleX(1);
        background-color: red;
      }
    }
  }
}

2.滚动到元素开始动画

 <div class="page" ref="pageRef">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div
      class="box"
      :class="{ hidden: true, show: showVisible }"
      ref="divRef"
    ></div>
  </div>

import { ref, onMounted, nextTick } from 'vue'
const showVisible = ref<boolean>(false)
const divRef = ref<HTMLDivElement>()
const pageRef = ref<HTMLDivElement>()
function removeHandle() {
  if (!pageRef.value || !divRef.value) return
  const height = pageRef.value?.scrollTop + pageRef.value?.offsetHeight
  showVisible.value = height > divRef.value?.offsetTop
  if (showVisible.value)
    pageRef.value?.removeEventListener('scroll', removeHandle)
}
onMounted(() => {
  nextTick(() => {
    pageRef?.value?.addEventListener('scroll', removeHandle)
  })
})

.page {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.box {
  width: 200px;
  height: 200px;
  background-color: aqua;
  margin-bottom: 30px;
}
.hidden {
  opacity: 0;
  transition: all 0.5s ease;
  transform: translateX(-30px);
}
.show {
  opacity: 1 !important;
  transform: translateX(0px) !important;
}