vue入门5---vue动画transition/animati

一、动画理解

• 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). 使用<transition name="xxx">包裹目标元素
2). 定义class样式
    1>. 指定过渡样式: transition
    2>. 指定隐藏时的样式: opacity/其它

动画过程图

transition案例：

<style>
    /*指定过渡样式  xxx 指 name="XXX"中的属性名*/
    .xxx-enter-active, .xxx-leave-active {
      transition: opacity 1s
    }
    /*指定隐藏时的样式*/
    .xxx-enter, .xxx-leave-to {
      opacity: 0;
    }
    .move-enter-active {
      transition: all 1s
    }
    .move-leave-active {
      transition: all 3s
    }
    .move-enter, .move-leave-to {
      opacity: 0;
      transform: translateX(20px) // x轴方向移动
    }
  </style>
<div id="demo">
  <button @click="show = !show">Toggle</button>
  <transition name="xxx">
    <p v-show="show">hello</p>
  </transition>
</div>
<hr>
<div id="demo2">
  <button @click="show = !show">Toggle2</button>
  <transition name="move">
    <p v-show="show">hello</p>
  </transition>
</div>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      show: true
    }
  })
  new Vue({
    el: '#demo2',
    data: {
      show: true
    }
  })

animation案例：

 <style>
    .XXX-enter-active {
      animation: xxx-in .5s;
    }
    .XXX-leave-active {
      animation: XXX-in .5s reverse; // reverse 
    }
    @keyframes XXX-in {
      0% {
        transform: scale(0);
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
    }
  </style>
<div id="example-2">
  <button @click="show = !show">Toggle show</button>
  <br>
  <transition name="XXX">
    <p v-if="show" style="display: inline-block">Lorem</p>
  </transition>
</div>
<script>
  new Vue({
    el: '#example-2',
    data: {
      show: true
    }
  })
</script>

二、过滤器

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

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

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

<div id="test">
  <h2>显示格式化的日期时间</h2>
  <p>{{time}}</p>
  <p>最完整的: {{time | dateString}}</p>
  <p>年月日: {{time | dateString('YYYY-MM-DD')}}</p>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js"></script>
<script>
  // 定义过滤器,vue.filter是vue的函数对象,因为`.`调用
  Vue.filter('dateString', function (value, format='YYYY-MM-DD HH:mm:ss') {// 形参默认值
    return moment(value).format(format);
  })
  new Vue({
    el: '#test',
    data: {
      time: new Date()
    },
    mounted () {
      setInterval(() => {
        this.time = new Date()
      }, 1000)
    }
  })
</script>