transition
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库，如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
过渡的CSS类名
会有 4 个(CSS)类名在 enter/leave 的过渡中切换
- v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
- v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。
- v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
-
v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。
例子
div id="example-1">
<button @click="show = !show">
Toggle render
</button>
<transition name="slide-fade">
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el: '#example-1',
data: {
show: true
}
})
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-active {
transform: translateX(10px);
opacity: 0;
}
theme
参考 [muse UI theme]（http://www.muse-ui.org/#/theme）
主题的使用
muse-ui 预设 4 种主题 light, dark, carbon, teal 只需要在组件后面引入即可
import Vue from 'vue'
import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'
import 'muse-ui/dist/theme-carbon.css' // 使用 carbon 主题
Vue.use(MuseUI)
动态的切换主题,需要依赖 webpack 的 raw-loader 加载器(npm 安装一下该插件)
<template>
<mu-tabs :value="theme" @change="changeTheme">
<mu-tab title="LIGHT (DEFAULT)" value="light"/>
<mu-tab title="DARK" value="dark"/>
<mu-tab title="CARBON" value="carbon"/>
<mu-tab title="TEAL" value="teal"/>
</mu-tabs>
</template>
<script>
import light from '!raw!muse-ui/dist/theme-default.css'
import dark from '!raw!muse-ui/dist/theme-dark.css'
import carbon from '!raw!muse-ui/dist/theme-carbon.css'
import teal from '!raw!muse-ui/dist/theme-teal.css'
export default {
data () {
return {
theme: 'light',
themes: {
light,
dark,
carbon,
teal
}
}
},
methods: {
changeTheme (theme) {
this.theme = theme
const styleEl = this.getThemeStyle()
styleEl.innerHTML = this.themes[theme] || ''
},
getThemeStyle () {
const themeId = 'muse-theme'
let styleEl = document.getElementById(themeId)
if (styleEl) return styleEl
styleEl = document.createElement('style')
styleEl.id = themeId
document.body.appendChild(styleEl)
return styleEl
}
}
}
</script>
有问题欢迎留言~~
