Vue的几种展开收缩动画
一、//需要动画的内容.router-slid-enter-active, .router-slid-leave-active {transition: all .4s;}.router-slid-enter, .router-slid-leave-active {transform: translate3d(0, 3rem, 0);opacity: 0;}二、创建ShrinkView.vue组件
·
一、使用CSS
插入transition标签后,写下面样式
.router-slid-enter-active, .router-slid-leave-active {
transition: all .4s;
}
.router-slid-enter, .router-slid-leave-active {
transform: translate3d(0, 3rem, 0);
opacity: 0;
}
二、使用组件
创建ShrinkView.vue组件
<template>
<div class="shrink-view" :style="{maxHeight: (mIsOpen?contentHeight:0) + 'px'}">
<slot></slot>
</div>
/template>
<script>
export default {
props: {
value: Boolean
},
updated () {
this.init();
},
mounted () {
this.init();
},
methods: {
init () {
this.$nextTick(() => {
this.contentHeight = this.$el.scrollHeight;
});
}
},
watch: {
value (newValue) {
this.mIsOpen = newValue;
},
mIsOpen (newValue) {
this.$emit('input', newValue);
}
},
data () {
return {
contentHeight: 0,
mIsOpen: this.value,
}
}
}
</script>
<style scoped>
.shrink-view {
-webkit-transition-duration: 600ms;
-moz-transition-duration: 600ms;
-ms-transition-duration: 600ms;
-o-transition-duration: 600ms;
transition-duration: 600ms;
overflow: hidden;
}
</style>
在其它页面引入该组件
<template>
<div>
<h1>Vue实现收缩效果</h1>
<input type="checkbox" v-model="open">
<div style="border: 1px solid gray">
<shrink-view v-model="open">
内容
</shrink-view>
</div>
</div>
</template>
<script>
import ShrinkView from '../components/ShrinkView';
export default {
components: {
ShrinkView
},
data () {
return {
open: false
}
}
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)