vue入门5---vue动画transition/animation、过滤器filter

一、动画理解

• 1.操作 css 的 trasition 或 animation

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
-在 CSS 过渡和动画中自动应用 class
-可以配合使用第三方 CSS 动画库
-在过渡钩子函数中使用 JavaScript 直接操作 DOM
-可以配合使用第三方 JavaScript 动画库

• 2. vue 会给目标元素添加/移除特定的 class
• 3. 过渡transition的相关类名

xxx-enter-active: 指定显示的 transition
xxx-leave-active: 指定隐藏的 transition
xxx-enter/xxx-leave-to: 指定隐藏时的样式

使用步骤：
1). 使用包裹目标元素
2). 定义class样式
    1>. 指定过渡样式: transition
    2>. 指定隐藏时的样式: opacity/其它

动画过程图

transition案例：

  Toggle
  
    
hello
  



  Toggle2
  
    
hello
  

二、过滤器

• 1. 功能: 对要显示的数据进行特定格式化后再显示
  2. 注意: 并没有改变原本的数据, 可是产生新的对应的数据
• 使用：

  *1.定义过滤器
Vue.filter(filterName, function(value[,arg1,arg2,...]){ // 进行一定的数据处理
    return newValue
})
 *2. 使用过滤器
{{myData | filterName}}
 
{{myData | filterName(arg)}}

demo(时间格式化,使用插件moment.js):

  
显示格式化的日期时间
  
{{time}}
  
最完整的: {{time | dateString}}
  
年月日: {{time | dateString('YYYY-MM-DD')}}