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:
right:
top:
bottom:
z-index:
background: #aaaaaa
.background
position: absolute
left:
top:
width: %
height: %
z-index: -
opacity: 0.6
filter: blur(20px)
.top
position: relative
margin-bottom: 25px
.back
position absolute
top:
left: 6px
z-index:
.icon-back
display: block
padding: 9px
font-size: 16px
color: #003a39
transform: rotate(-90deg)
.title
width: %
margin: 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:
bottom:
z-index:
width: %
height: 60px
background: #a1a1a1
.icon
flex: 40px
width: 40px
padding: 10px 20px
.text
display: flex
flex-direction: column
justify-content: center
flex:
line-height: 20px
overflow: hidden
.name
margin-bottom: 2px
no-wrap()
font-size: 14px
color: #fff
.desc
no-wrap()
font-size: 12px
color: #
</style>
vue--动画收缩的更多相关文章
- vue动画的用法
vue动画 在vue.js中有两种写动画的方法,第一种就是像js里一样,用原生代码来实现,第二种则是使用animate.css的动画类文件,这个动画类和bootstrap.css文件类似,直接调用类就 ...
- vue动画及其原理
1,vue动画的实现原理,主要是通过在不同时期给需要动画的dom元素加上css动画样式 我们以显示和隐藏动画为例 a, 需要动画的dom元素 b,点击时vue控制往vue中加的样式 2, 我们以两张 ...
- vue教程3-02 vue动画
vue教程3-02 vue动画 以下代码,已经用包管理器下载好vue,animate <!DOCTYPE html> <html lang="en"> &l ...
- vue动画实现方式
vue动画实现方式 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...
- vue动画理解,进入、离开、列表过度和路由切换。
vue的动画对于很多初学者,甚至对很多老鸟来说也是很费劲,不容易控制的. 这篇文章讲vue动画的理解.其实没那么难. 动画理解 一个元素从A状态变成B状态,如果这个过程通过某种方式反应在视图上了,那么 ...
- Vue动画操作
概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.c ...
- vue 动画原理 part1
Vue动画原理 增加和删除css增加样式实现一个过渡效果也就是动画效果 1.需要动画效果的标签外包裹一个transition标签 会被自动分析css样式,然后自动构建一个动画流程 transition ...
- Javascript - Vue - 动画
动画状态类名 vue动画通过将需要执行动画的标签放入transition标签中,再通过设置预置的vue动画类名的css样式来控制动画的呈现效果. 开场动画状态的三个类名 v-enter:动画开始之前的 ...
- 15.vue动画& vuex
Vue.config.productionTip = false; ==是否显示提示信息== ==import/export== export xxx 必须跟跟对象或者和定义一起 对象: export ...
- vue动画
最近想搞搞vue的过渡和动画,以为照着官网写就好了,谁知道还是出现一些状况 具体表现就是不用webpack打包时候写的过渡是正常的,而用了webpack打包就不正常了 说使用了未定义的element: ...
随机推荐
- python函数带()与否
一.不带括号时,调用的是这个函数本身 ,是整个函数体,是一个函数对象,不须等该函数执行完成二.带括号(参数或者无参),调用的是函数的执行结果,须等该函数执行完成的结果 进程和线程的target=fun ...
- JMeter-正则表达式(Json中取value的部分值)
2019-04-26问题:返回的json中提取短信验证码614930 { : "total":2, : "totalPage":1, : "rows& ...
- LeetCode 15 输入无序、有重复,输出排重版 3-Sum
V1 粗暴的遍历,时间复杂度O(N³) func threeSumClosest(nums []int, target int) int { min := 0 result := 0 for i := ...
- OO第一单元总结(表达式求导)
写在前边:第一次接触面向对象语言,编程思想仍然不可避免的有以前面向过程的影子.从第一次作业的完全面向过程,到第二次学会剥离各个类互不影响到第三次作业的先构思面向对象的基本程序架构再编程.虽然程序有些地 ...
- Linux进程PRI与NI值
1.PRI -> 进程的优先级,大部分系统(Linux.UCOSII)都是数字越低优先级越高,进程就优先运行 , Linux中的PRI(new) = PRI(old) + nice ,其中 , ...
- 在eclipse中的交叉编译
1.硬件是Arm 9的板子,运行的系统是Ubuntu 12.05 2.电脑虚拟机上安装的系统是Ubuntu 10.04,程序的开发都是在虚拟机上完成,开发IDE是eclipse 3.eclipse 默 ...
- Linux之文件权限
在Linux系统中,root用户基本对于每个文件都有可操作性,但是普通用户可能只能查看特定的文件,这是因为文件存在的权限机制,初步掌握文件的基本权限就操作可以对一些系统文件或者自定义文件有一个操作空间 ...
- python下载及安装
1, 许多新学员不知道开始学Python需要安装什么,需要准备什么,特地写下这篇文档给一脸懵逼的新同学们作为指导文档. 2, 首先,学Python需要有一台电脑,这是必须的.老师的系统是windows ...
- windows10中修改环境变量的正确姿势
提到修改环境变量,我们可能自然而然想到:右键This PC->Properties->Advanced System Settings->Environment Variables ...
- pandas 时间格式转换
OUTLINE 常见的时间字符串与timestamp之间的转换 日期与timestamp之间的转换 常见的时间字符串与timestamp之间的转换 这里说的字符串不是一般意义上的字符串,是指在读取日期 ...