#vue #简单CSS实现，路由切换，元素动画过渡效果。

效果图

实现原理

利用vue的生命周期-钩子函数mounted()来触发变量修改;
动态的增删类名使得css的过渡动画属性transition生效。相关可以参考这里：#transform #transition 通过类名实现文字动画过渡

具体逻辑代码

组件 1 - 登录

DOM上使用vue的class绑定一个控制变量ifActiveCustomStyle，

<div :class="{Introduce:true,customStyle:ifActiveCustomStyle}">

data函数返回的对像中初始化该值

export default {
    data() {
        return {
            ifActiveCustomStyle: false,
        }
    }
}

生命周期中的mounted钩子函数

mounted() {
    this.ifActiveCustomStyle = !this.ifActiveCustomStyle
  },

相应的css样式

.LoginIn > .Introduce {
  background-image: linear-gradient(to bottom right, #4bb0ff, #6149f6);
  height: 93px;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction:column ;
  transition: height 0.3s;
  transition-timing-function: ease-in-out;
}
.LoginIn .customStyle{
  height: 15em;
}

组件 2 - 注册组件

和组件一大同小异，只有css样式有细微差别。

DOM

<div :class="{ Introduce: true, customStyle: ifActiveCustomStyle }">

data

export default {
    data() {
      return {
        ifActiveCustomStyle: false,
      }
    }
}

钩子函数

mounted() {
    this.ifActiveCustomStyle = !this.ifActiveCustomStyle;
  },

相关css

.LoginUp > .Introduce {
  height: 15em;
  background-image: linear-gradient(to bottom right, #4bb0ff, #6149f6);
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: height .3s;
  transition-timing-function: ease-in-out;
}
.LoginUp .customStyle{
  height: 93px;

}

可能遇到的问题

如果你按照本文的参考，效果没有生效，很可能是因为你使用了vue封装的<transition>标签。
例如在的你路由出口：

<transition name:‘xxx‘><router-view></router-view></transition>