[TOC] #### 唱片飛入效果  * [ ] 基礎效果實現 ~~~ // 全屏播放器效果 <transition name="normal"></transition> // 迷你播放器效果 <transition name="mini"></transition> ~~~ ~~~ .normal-enter-active, &.normal-leave-active transition: all 0.4s .top, .bottom 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-enter-active, &.mini-leave-active transition: all 0.4s .mini-enter, &.mini-leave-to opacity: 0 ~~~ * [ ] 擴展效果 ~~~ <div class="player" v-show="playList.length >　0"> <!-- 全屏播放器 --> <transition name="normal" @enter="enter" @after-enter="afterEnter" @leave="leave" @after-leave="afterLeave" > <div class="normal-player" v-show="fullScreen"> ~~~ * [ ] 圖示  ``` import { PlayerMixin } from 'utils/mixin' import animations from 'create-keyframe-animation' methods: { // 動畫即將出現，設置動畫結束位置 enter (el, done) { // 動畫即將開始，設置動畫初始坐標 const { x, y, scale } = this._getPosAndScale() // 定義動畫 let animation = { 0: { transform: `translate3d(${x}px,${y}px,0) scale(${scale})` }, 60: { transform: `translate3d(0,0,0) scale(1.1)` }, 100: { transform: `translate3d(0,0,0) scale(1)` } } // 執行動畫 animations.registerAnimation({ name: 'move', animation, presets: { duration: 400, easing: 'linear' } }) // 執行動畫，調用done函數跳到afterEnter函數 animations.runAnimation(this.$refs.cdWrapper, 'move', done) }, afterEnter () { // 清除動畫 animations.unregisterAnimation('move') this.$refs.cdWrapper.style.animation = '' }, // 動畫結束 leave (el, done) { this.$refs.cdWrapper.style.transition = 'all 0.4s' const { x, y, scale } = this._getPosAndScale() this.$refs.cdWrapper.style[transform] = `translate3d(${x}px,${y}px,0) scale(${scale})` const timer = setTimeout(done, 400) this.$refs.cdWrapper.addEventListener('transitionend', () => { clearTimeout(timer) done() }) }, // 清除參數 afterLeave () { this.$refs.cdWrapper.style.transition = '' this.$refs.cdWrapper.style[transform] = '' }, // 動畫初始位置 _getPosAndScale () { const targetWidth = 40 // 迷你播放球寬度 const paddingLeft = 40 // 迷你播放器距離左邊偏移 const paddingBottom = 30 // 迷你播放球距離底部偏移 const paddingTop = 80 // 頂部導航寬度 const width = window.innerWidth * 0.8 // 大播放球寬度80% const scale = targetWidth / width // 初始縮放比例 const x = -(window.innerWidth / 2 - paddingLeft) // 迷你播放器初始X坐標 // 迷你播放球初始Y坐標 const y = window.innerHeight - paddingTop - width / 2 - paddingBottom return { x, y, scale } } } ```