vue: transition和theme

transition

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：

• 在 CSS 过渡和动画中自动应用 class
• 可以配合使用第三方 CSS 动画库，如 Animate.css
• 在过渡钩子函数中使用 JavaScript 直接操作 DOM
• 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

过渡的CSS类名

会有 4 个(CSS)类名在 enter/leave 的过渡中切换

1. v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
2. v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。
3. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
4. v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。
   例子

div id="example-1">
  
    Toggle render
  
  
    
hello
  

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 安装一下该插件)

有问题欢迎留言~~