文章目录
- 1.鼠标经过添加下划线
- 2.滚动到元素开始动画
如果没有一些花里胡哨的操作,那么有什么意义呢,那么我会在这篇文章文章记录我搬运过来的笔记
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;
}