【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