首页新闻找找看学习计划

vue添加动画钩子后,动画失效,是什么原因?

0
悬赏园豆:5 [待解决问题]

<template>
<div class="hello">
<div class="toggle" @click="fullScreen = !fullScreen" v-show="fullScreen">toggle</div>
<transition name="normal"
@enter="enter"
@after-enter="afterEnter"
@leave="leave"
@after-leave="afterLeave">
<div class="middle" v-show="fullScreen">
<div class="middle-l">
<div class="cd-wrapper">
<div class="cd">
<img class="image" src="./s.jpg">
</div>
</div>
</div>
</div>
</transition>
<div v-show="!fullScreen" @click="fullScreen = !fullScreen" class="mini">mini</div>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
data () {
return {
show: true,
fullScreen: true
}
},
methods: {
enter(el, done) {
console.log('enter')
done()
},
afterEnter() {
console.log('afterEnter')
},
leave(el, done) {
console.log('leave')
done()
},
afterLeave() {
console.log('afterLeave')
},
}
}
</script>

<style lang="stylus" scoped>
.hello
position fixed
bottom 0
top 0
left 0
right 0
text-align center
line-height 0
font-size 0
background pink
.middle
position absolute
top 40px
bottom 40px
right 0
left 0
background #4d4446
&.normal-enter-active, &.normal-leave-active
transition: all 0.3s
&.normal-enter, &.normal-leave-to
transform: translate3d(100%, 0, 0)
opacity 0
.middle-l
display inline-block
vertical-align top
position relative
width 100%
height 0
padding-top 80%
.cd-wrapper
position absolute
left 10%
top 0
width 80%
height 100%
box-sizing border-box
.cd
width 100%
height 100%
border-radius 50%
.image
position absolute
left 0
top 0
width 100%
height 100%
box-sizing border-box;
border-radius 50%
border 10px solid rgba(255, 255, 255, 0.1)
.toggle
width 100%
height 40px
background #eee
border none
line-height 40px
font-size 14px
.mini
position absolute
bottom 0
width 100%
height 40px
border none
line-height 40px
background #eee
font-size 14px
</style>

ladybug7的主页 ladybug7 | 初学一级 | 园豆:197
提问于:2020-02-13 17:12

建议改进改进一下排版,支持 markdown 语法

dudu 2周前

博问里不知道在哪里调整代码格式。所以在随笔里新建了一个可以查看代码格式的文本https://www.cnblogs.com/ladybug7/p/12304368.html

ladybug7 2周前
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册