（五）Vue动画操作和过滤器

一：CSS的动画

(1) 操作 css 的 trasition 或 animation

(2) vue 会给目标元素添加/移除特定的 class

(3) 过渡的相关类名

xxx-enter-active: 指定显示的 transition

xxx-leave-active: 指定隐藏的 transition

xxx-enter/xxx-leave-to: 指定隐藏时的样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>10_过渡&动画1</title>
  <style>
    /*指定过渡样式*/
    .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 10s
    }
    .move-enter, .move-leave-to {
      opacity: 0;
      transform: translateX(20px)
    }
  </style>
</head>
<body>
<!--

　　二：CSS的动画操作 keyframe

<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" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      show: true
    }
  })

  new Vue({
    el: '#demo2',
    data: {
      show: true
    }
  })

</script>
</body>
</html>

  .bounce-enter-active {
      animation: bounce-in .5s;
    }
    .bounce-leave-active {
      animation: bounce-in .5s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
}

　三：过滤器

1. 理解过滤器

功能: 对要显示的数据进行特定格式化后再显示

注意: 并没有改变原本的数据, 可是产生新的对应的数据

2：定义和使用过滤器

(1)定义过滤器

Vue.filter(filterName, function(value[,arg1,arg2,...]){

// 进行一定的数据处理

return newValue

})

(2) 使用过滤器

<div>{{myData | filterName}}</div>

<div>{{myData | filterName(arg)}}</div>

<!DOCTYPE html>

<head>

</head>

<body>

<!--

1. 理解过滤器

功能: 对要显示的数据进行特定格式化后再显示

注意: 并没有改变原本的数据, 可是产生新的对应的数据

2. 编码

1). 定义过滤器

Vue.filter(filterName, function(value[,arg1,arg2,...]){

// 进行一定的数据处理

return newValue

})

2). 使用过滤器

<div>{{myData | filterName}}</div>

<div>{{myData | filterName(arg)}}</div>

-->

<h2>显示格式化的日期时间</h2>

<p>最完整的: {{time | dateString}}</p>

<p>年月日: {{time | dateString('YYYY-MM-DD')}}</p>

</div>

Vue.filter('dateString', function (value, format) {

return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')

})

new Vue({

el:"#test",

data:{

time: new Date()

}

})

</script>

</body>

</html>

posted @ 2018-12-10 17:18 INSTANCE_SELF 阅读(188) 评论(0) 收藏举报

刷新页面返回顶部

INSTANCE_SELF

主动吃学习的苦，永远比被动吃社会的苦更好。

（五）Vue动画操作和过滤器

公告