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

Question

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86

<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条评论