您的位置：首页 > Web前端 > Vue.js

vue通过过渡属性实现游览器下拉动画demo

2019-10-14 17:03 429 查看

前言

vue的过渡属性很神奇,过渡属性是指元素从无到有和从有到无这个期间的属性的变化.我也并不能完全掌握过渡属性,所以写个简单的demo练习练习。

实现

监听游览器滚动条的变化,在下拉到相应位置时显示元素

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>vue通过过渡属性实现游览器下拉动画demo</title>
<!--  <script src="./库/vue.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
body,html {
padding: 0px;
margin: 0px;
}

#app {
padding: 0px;
margin-right: 0px;
height: 800px
}

.content {
margin-top: 400px;
height: 400px;
width: 100%;
box-sizing: border-box;
position: relative;
overflow-x:hidden
}

.base {
height: 100px;
width: 100%;
}
.pink{
background-color: #ff0097;
}
.blue{
background-color: #00CCFF;
}
.green{
background-color: #40ed58;
}
.yellow{
background-color: #faff72;
}

/*元素正在进入的状态*/
.slide-fade-right-enter-active {
transition: all 1s linear;
}

/*元素进入之前的状态*/
.slide-fade-right-enter
{
transform: translateX(100%);
opacity: 0;
}

.slide-fade-left-enter-active {
transi
7ff7
tion: all 1s linear;
}

.slide-fade-left-enter
{
transform: translateX(-100%);
opacity: 0;
}
</style>
</head>

<body>
<div id="app">
<div class="content">
<transition name="slide-fade-left">
<div v-show="show" class="base green">
</div>
</transition>
<transition name="slide-fade-right">
<div v-show="show" class="base pink">
</div>
</transition>
<transition name="slide-fade-left">
<div v-show="show" class="base blue">
</div>
</transition>
<transition name="slide-fade-right">
<div v-show="show" class="base yellow">
</div>
</transition>
</div>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
show: false
},
mounted() {
window.addEventListener('scroll', this.handleScroll) // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
},
methods: {
handleScroll() {
// document.documentElement.clientHeight  游览器市口的高度
// document.documentElement.scrollTop 滚动条滑动的位置
if (document.documentElement.clientHeight + document.documentElement.scrollTop >= 1100) {
this.show = true
//移除事件监听
window.removeEventListener("scroll", this.handleScroll);
}
}
}
})
</script>

</html>

效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航