3.md

展开收起动画（css类名）

在我们把全屏切换成迷你的时候，和从迷你播放器切换成全屏的时候，这个切换交互效果比较生硬。 要加一些动画。

我们要做的效果如下描述：

全屏效果：

1. 顶部区域（收起按钮和文字信息） 在进入的时候 从上往下滑落，离开的时候 从原来的位置上往上滑出
2. 整体 在进入的时候 淡入效果，离开的时候，淡出
3. 底部区域（控制按钮部分）在进入的时候，从底部往上滑入，离开的时候，从原来的位置上往下滑出

迷你播放界面效果

在进入的时候淡入，离开的时候淡出

在vue中使用<transition> 标签来做动画效果

下面的代码中是伪代码。但是主要也是针对这几个区域做效果。

  <div class="player" v-show="playlist.length >0">
    <transition name="normal">
      <div class="normal-player">
        .....
        <div class="top"></div>
        <div class="bottom"></div>
      </div>
    </transition>
    <transition name="mini">
      <div class="mini-player">
      </div>
    </transition>
  <div>

.normal-player {
  // 定义进入和离开过度状态，这个类中可以定义过程时间，延迟和曲线函数。
      &.normal-enter-active, &.normal-leave-active {
        transition all 0.4s
        .top, .bottom {
          /*transition all 0.4s*/ // 基础效果
          transition all 0.4s cubic-bezier(0.86, 0.18, 0.82, 1.32) // 贝塞尔曲线，有一种回弹的效果，看不懂这些数值标识啥意思
        }
      }
      &.normal-enter, &.normal-leave-to {
        opacity 0
        .top {
          transform: translate3d(0, -100px, 0)
        }
        .bottom {
          transform: translate3d(0, 100px, 0)
        }
      }
}

.mini-player {
      &.mini-enter-active, &.mini-leave-active {
        transition all 0.4s
      }
      &.mini-enter, &.mini-leave-to {
        opacity 0
      }
}

上面的类名参考 官网 过渡的css类名

1. v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
2. v-enter-active: 定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效（于此同时 v-enter 被删除），在 transition/animation 完成之后移除。
4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
5. v-leave-active: 定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效（于此同时 v-leave 被删除），在 transition/animation 完成之后移除。

下面来解说一个简单的，复杂的也是如此的原理

.mini-player {
      &.mini-enter-active, &.mini-leave-active {
        transition all 0.4s
      }
      &.mini-enter, &.mini-leave-to {
        opacity 0
      }
}

淡入效果原理解说：

mini-enter-active 在元素被插入时生效，mini-player被添加了 在 transition all 0.4s样式，transition/animation 完成之后该样式被移除；

mini-enter 在元素被插入时生效，此时mini-player元素被添加上了 opacity 0的样式，在下一个帧移除，移除之后，opacity的默认值就是 1。

上面两个组合起来，元素进入（显示）的效果组合起来就是：mini-player元素从透明变成不透明这个过程花费了0.4秒的过渡时间，形成了淡入效果

淡出效果原理解说

mini-leave-active ： 在元素插入时，就给该元素增加了transition all 0.4s样式，在动画效果完成后移除该样式

mini-leave-to ： 在离开过渡被触发一帧后生效，此时mini-player元素被添加上了 opacity 0的样式，在动画效果完成后移除该样式。opacity的默认值就是 1。

上面两个组合起来：在显示状态下 opacity 从1 在下一帧变成了0，用了0.4s的效果。 从不透明变成了透明