<template>
<h3 class="textChangee" :style="{ transform: translatechange }">xxx</h3>
</template>
<script>
export default {
data() {
return {
translatechange: 'translateX(0%)'
}
},
methods: {
windowScrollListener() {
//获取操作元素最顶端到页面顶端的垂直距离
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
if (scrollTop < 2400) {
this.translatechange = 'translateX(100%)'
}
if (scrollTop >= 2400) {
this.translatechange = 'translateX(0%)'
}
if (scrollTop > 3000) {
this.translatechange = 'translateX(100%)'
}
console.log(scrollTop);
}
},
created() {
// 实时监听
window.addEventListener('scroll', this.windowScrollListener)
}
}
</script>
<style>
.textChangee {
transition: all 3s;
transform: translateX(100%);
}
</style>