vue--动画收缩

首先 install vuex

创建store文件夹

在 store 文件夹分别建立

state.js

// 状态管理
// 定义state 原始数据
const state = {
  fullScreen: false
}

export default state

mutation-types.js

// 定义Mutations相关的字符串常量 
// Mutations的修改动作
export const SET_FULL_SCREEN = 'SET_FULL_SCREEN'

mutations.js

// Mutations 定义对数据修改的逻辑
import * as types from './mutation-types'

const mutations = {
  [types.SET_FULL_SCREEN](state, flag) {
  state.fullScreen = flag
  }
}

export default mutations

actions.js

// 对mutation进行封装
import * as types from './mutation-types'

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

getters.js

// 获取state 对数据进行映射 用getters取state的数据去到组件里  
// getters可以是个函数 类似于计算属性 可以根据state的不同值计算出新的值 可以在getters里写一些复杂的判断逻辑
 
export const fullScreen = state => state.fullScreen

index.js

// 入口
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict: debug,
  plugins: debug? [createLogger()] : []
})

在main.js导入store

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  render: h => h(App)
})

创建meow.vue

<template>
  <div class="meow">
    <transition name="normal">
      <div class="normal-vue" v-show="fullScreen">
        <div class="background">
        </div>
        <div class="top">
          <div class="back" @click="back">
            <i class="icon-back"></i>
          </div>
          <h1 class="title"></h1>
          <h2 class="subtitle"></h2>
        </div>
      </div>
    </transition>
    <transition name="mini">
      <div class="mini-vue" v-show="fullScreen">
        <div class="icon">
        </div>
        <div class="text">
          <h2 class="name"></h2>
          <p class="desc"></p>
        </div>
      </div>
    </transition>
  </div>
</template>                

script

<script type="text/ecmascript-6">
import { mapGetters, mapMutations } from 'vuex'

export default {
    computed: {
        ...mapGetters([
            'fullScreen'
        ])
    },
    methods: {
        back() {
            this.setFullScreen(false)
        },
        open() {
            this.setFullScreen(true)
        },
        ...mapMutations({
            setFullScreen: 'SET_FULL_SCREEN'
        })
    }
    
}
</script>

css

<style lang="stylus" scoped>
.meow
    .normal-vue
      position: fixed
      left: 0
      right: 0
      top: 0
      bottom: 0
      z-index: 150
      background: #aaaaaa
      .background
        position: absolute
        left: 0
        top: 0
         100%
        height: 100%
        z-index: -1
        opacity: 0.6
        filter: blur(20px)
      .top
        position: relative
        margin-bottom: 25px
        .back
          position absolute
          top: 0
          left: 6px
          z-index: 50
          .icon-back
            display: block
            padding: 9px
            font-size: 16px
            color: #003a39
            transform: rotate(-90deg)
        .title
           70%
          margin: 0 auto
          line-height: 40px
          text-align: center
          no-wrap()
          font-size: 18px
          color: #fff
        .subtitle
          line-height: 20px
          text-align: center
          font-size: 14px
          color: #fff
    .mini-vue
      display: flex
      align-items: center
      position: fixed
      left: 0
      bottom: 0
      z-index: 180
       100%
      height: 60px
      background: #a1a1a1
      .icon
        flex: 0 0 40px
         40px
        padding: 0 10px 0 20px
      .text
        display: flex
        flex-direction: column
        justify-content: center
        flex: 1
        line-height: 20px
        overflow: hidden
        .name
          margin-bottom: 2px
          no-wrap()
          font-size: 14px
          color: #fff
        .desc
          no-wrap()
          font-size: 12px
          color: #000
</style>