本节知识点:
如何让小方块做抛物线动画
- 单个元素做动画只能实现从右上角到左下角的上下斜线平移
- 类名为wai的外层元素做y轴过渡,先向上平移(负方向)再向下平移(正方向),使用贝塞尔曲线自定义过渡动画
- 类名为lit的内层元素做x轴过渡,向左平移(负方向)
- HTML部分
<template>
<div class="ratings">
<button @click='slidelit'>移动小方块</button>
<transition name='slide'>
<div class='wai' v-show='lit_show'>
<div class='lit'></div>
</div>
</transition>
</div>
</template>
- javascript部分
<script>
export default {
name: 'ratings',
data(){
return {
lit_show :false
}
},
methods:{
slidelit(){
this.lit_show = !this.lit_show
}
}
}
</script>
- css部分
<style lang="stylus" rel="stylesheet/stylus" scope>
.wai
position:fixed
left:250px
bottom:400px
transition:all 2s cubic-bezier(.76,-0.75,.36,.94)
&.slide-enter,&.slide-leave-to
transform:translate3d(0,200px,0)
&.slide-enter .lit,&.slide-leave-to .lit
transform:translate3d(-200px,0,0)
.lit
width:50px
height:50px
background:pink
transition:all 2s linear
</style>