【WEB】Vue2.0音乐APP实战中的知识点总结（四）

一.界面展示

二.知识点总结

1.vuex中action的作用
用于批量的改变state中的值
action中

import * as types from './mutation-type'

export const selectPlay = function({commit,state},{list,index}){
    commit(types.SET_SEQUENCE_LIST,list)
    commit(types.SET_PLAYLIST,list)
    commit(types.SET_CURRENT_INDEX,index)
    commit(types.SET_FULL_SCREEN,true)
    commit(types.SET_PLAYER_STATE,true)

}

调用action

import {mapActions} from 'vuex'
 ...mapActions([
        'selectPlay'
      ])

2.动画< transition>标签的使用以及create-keyframe-animation
库的调用
用< 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)

使用库的目的在于控制其他的dom节点

<transition name="normal" @enter = "enter" @after-enter = "afterEnter" @leave="leave" @after-leave="leaveEnter">

      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'
          }
        })

        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})`
        this.$refs.cdWrapper.addEventListener('transitionend',done)
      },
      leaveEnter(){
        this.$refs.cdWrapper.style.transition = ''
        this.$refs.cdWrapper.style[transform] = ''
      },

3.使用src加载，避免未加载完就调用播放的方法

  watch:{
      currentSong(){
        this.$nextTick(()=>{
          this.$refs.audio.play()
        })

      },
      playing(newPlaying){
        const audio=this.$refs.audio
        this.$nextTick(()=>{
          newPlaying?audio.play():audio.pause()
        })

      }
    },

4.控制不同状态下样式的变化

 computed:{
      playIcon(){
        return this.playing?'icon-pause':'icon-play'
     } 
    },

5.绑定点击事件时的冒泡现象

由于子元素的点击事件会冒泡到父元素的点击事件上，因此要在子元素上调用@click.stop