我的也是，进入的动画没有效果

来源：9-8 Vue项目详情页 - 在项目中加入基础动画

你的粉丝_啊德

2019-05-30

进入的动画没有效果，离开的有动画效果

<template>
<transition>
<slot></slot>
</transition>
</template>
<script>
export default {
name: 'FadeInOut'
}
</script>
<style lang="stylus" scoped>
.v-enter,.v-leave-to
opacity 0
.v-enter-active,.v-leave-active
transition opacity 2s
</style>

写回答

4回答

你的粉丝_啊德

提问者

2019-06-09

//img.mukewang.com/szimg/5cfd130100015c0602000316.jpg

这是平板的

你的粉丝_啊德

提问者

2019-06-09

//img.mukewang.com/szimg/5cfd0f9c00017ce902000400.jpg 就是这样，我的华为手机还有平板都是这样

你的粉丝_啊德

提问者

2019-06-07

<template>
<div>
<div class = "fixed" v-if = "!showAbsoluteBack" :style = "styleOpacity">
<div class = "fixedBack" @click = "goBack">
<i class = "iconfont">&#xe677;</i>
</div>
<div class = "title">故宫</div>
</div>
<div class = "absoluteBack" @click = "goBack" v-if = "showAbsoluteBack"><i class = "iconfont">&#xe677;</i></div>
</div>
</template>
<script>
export default {
name: 'detailHeader',
data (){
return {
showAbsoluteBack: true,
styleOpacity: {
opacity: 0
}
}
},
methods: {
goBack () {
this.$router.back()
},
handleScroll (){
const top = document.documentElement.scrollTop;
// console.log(top)
if (top > 0){
let opacity = top / 135
opacity = opacity > 1 ? 1 : opacity
this.styleOpacity = {
opacity
}
this.showAbsoluteBack = false
// console.log(top)
}else{
this.showAbsoluteBack = true
}
}
},
activated (){
window.addEventListener('scroll', this.handleScroll)
},
deactivated (){
window.removeEventListener('scroll', this.handleScroll)
}
}
</script>
<style lang="stylus" scoped>

@import '~styles/varibles.styl'

.absoluteBack
position absolute
width 20px
line-height 20px
top 20px
left 20px
padding 10px
border-radius 50%
background-color rgba(0,0,0,.7)
color white
text-align center
font-size 20px
z-index 2
.fixed
width 100%
position fixed
height $headerHeight
z-index 5
background-color $bgColor
.fixedBack
position absolute
padding 13px
float left
color white
.title
font-size 20px
color white
line-height $headerHeight
text-align center
.iconfont
font-size 24px
</style>