Vue过渡实现div的展开和收起的动画效果
记录一下在项目中使用过的vue过渡效果//template部分//移入和移出改变mainDiv的显示状态<div @mouseover="mouseOver1" @mouseleave="mouseLeave1"></div>//vue的过渡<transition name="draw"><div class="mainDiv" v-show="show1
·
记录一下在项目中使用过的vue过渡效果
//template部分
//移入和移出改变mainDiv的显示状态
<div @mouseover="mouseOver1" @mouseleave="mouseLeave1"></div>
//vue的过渡
<transition name="draw">
<div class="mainDiv" v-show="show1">
</div>
</transition>
//script部分
<script>
data () {
return {
show1: false,
}
methods: {
mouseOver1 () {
this.show1 = !this.show1
},
mouseLeave1 () {
this.show1 = !this.show1
},
}
</script>
//style部分
<style>
//div的样式自己决定,这些都不重要
.mainDiv {
position: absolute;
top: 0.89rem;
//最重要的是这个属性
//如果你使用left定位,那么就从左向右展开
//如果你使用right定位,那么就从右向左展开
right: 3.1rem;
width: 2rem;
height: 1rem;
}
.draw-enter-active, .draw-leave-active {
transition: all 1s ease;
}
.draw-enter,.draw-leave-to {
width: 0;
//你要向水平展开就width:0,要垂直展开就height:0,上边的原理相同
}
</style>
更多推荐
已为社区贡献3条内容
所有评论(0)