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

Question

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

<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>

Answer 1

提问者 你的粉丝_啊德 2019-06-09 22:09:28

这是平板的

Answer 2

提问者 你的粉丝_啊德 2019-06-09 21:55:35

就是这样，我的华为手机还有平板都是这样

Answer 3

提问者 你的粉丝_啊德 2019-06-07 22:50:53

<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>

Answer 4

提问者 你的粉丝_啊德 2019-06-01 19:41:49

知道了，v-if每次都有动画，v-show只有第一次点的时候有

• Dell #1

  聪明～

• 提问者 你的粉丝_啊德 回复 Dell #2

  老师，那个header的渐隐渐显的效果只有在电脑的浏览器调试有，用手机和平板都没有显示header，这是什么原因，是手机端不支持吗

• Dell 回复 提问者 你的粉丝_啊德 #3

  iphone手机吗

点开查看后面12条评论