请稍等 ...
×

采纳答案成功!

向帮助你的同学说点啥吧!感谢那些助人为乐的人

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

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

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


正在回答 回答被采纳积分+3

4回答

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

https://img1.sycdn.imooc.com//szimg/5cfd130100015c0602000316.jpg

这是平板的

0 回复 有任何疑惑可以回复我~
提问者 你的粉丝_啊德 2019-06-09 21:55:35

https://img1.sycdn.imooc.com//szimg/5cfd0f9c00017ce902000400.jpg就是这样,我的华为手机还有平板都是这样

0 回复 有任何疑惑可以回复我~
提问者 你的粉丝_啊德 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>


0 回复 有任何疑惑可以回复我~
提问者 你的粉丝_啊德 2019-06-01 19:41:49

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

0 回复 有任何疑惑可以回复我~
  • Dell #1
    聪明~
    回复 有任何疑惑可以回复我~ 2019-06-05 14:49:41
  • 提问者 你的粉丝_啊德 回复 Dell #2
    老师,那个header的渐隐渐显的效果只有在电脑的浏览器调试有,用手机和平板都没有显示header,这是什么原因,是手机端不支持吗
    回复 有任何疑惑可以回复我~ 2019-06-05 14:54:23
  • Dell 回复 提问者 你的粉丝_啊德 #3
    iphone手机吗
    回复 有任何疑惑可以回复我~ 2019-06-07 22:27:23
问题已解决,确定采纳
还有疑问,暂不采纳
意见反馈 帮助中心 APP下载
官方微信