vue部分动画效果

1. 路由跳转时的左右平移动画

    <transition name="page">
      <router-view></router-view>
    </transition>

css

  .page-enter {
       opacity: 0;
       transform: translateX(100%);
     }

  .page-leave-to {
    opacity: 0;
    transform: translateX(-100%);
    position: absolute;
  }

  .page-enter-active, .page-leave-active {
    transition: transform 1s ease;
  }

这里路由由右至左，进入或消失

2. ul 中增加 li ，减少 li 时，上下飘动显示隐藏

    <transition-group tag="ul"  appear>
      <li v-for="(item,index) in data" :key="item.id" @click="data.splice(index,1)">{{item.name}}</li>
    </transition-group>

这里 transition-group会渲染成 span 标签，因此 tag="ul"，并且这里的:key不要等index，这样splice时，有问题
appear 属性是为了页面刚刚展示时，有漂浮进入效果

css

		ul{
			width: 100%;
		}
		li{
			width: 100%;
		}
		.v-enter,.v-leave-to{
			opacity: 0;
			transform: translateY(90px);
		}
		.v-enter-active,.v-leave-active{
			transition: transform 1s ease;
		}
		.v-move{
			transition: transform 1s ease;
		}
		.v-leave-active{
			position: absolute;
		}

这里进入时由下往上飘，90px的距离，离开时，由上至下