在HTML部分使用Vue 提供的template封装组件,设置name,在template的子节点设置v-show,通过按钮来改变flag来改变状态,实现组件的显示/隐藏。

<template>
	...
	 <div @click=“flag=!flag”>按钮</div>
	 <transition name="slide">
		<div v-show="flag">
			...
		</div>
	 </transition>
	...
</template>

在JS中初始化flag

<script>
export default {
	data() {
    	return {
      		flag: true,//改变的值
      	}
    },
}
</script>

在CSS中设置平滑效果, enter / leave作用见 官网
transition:状态改变,第一个参数是改变的属性,我要改变的是transform,所以第一个参数是transform,第二个参数是指定时间才能完成这个改变
transform:下面写的是向下平滑隐藏,把所有的translateY换成translateX向右平滑隐藏
(无法解释,之后学习。。。)

<style lang="scss" scoped>
	.slide {
	  &-enter {
	    transform: translateY(100%);
	    &-to {
	      transform: translateY(0%);
	    }
	    &-active {
	      transition: transform 1s;
	    }
	  }
	  &-leave {
	    transform: translateY(0);
	    &-to {
	      transform: translateY(100%);
	    }
	    &-active {
	      transition: transform 1s ;
	    }
	  }
	}
</style>

&-是sass的写法 解释

这样就实现是组件的平滑移动。

Logo

前往低代码交流专区

更多推荐