vue transition实现组件平滑显示/隐藏

在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的写法 解释

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