（五）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>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>過濾器</title>
</head>
<body>
<!--
1. 理解過濾器
功能: 對要顯示的資料進行特定格式化後再顯示
注意: 並沒有改變原本的資料, 可是產生新的對應的資料
2. 編碼
1). 定義過濾器
Vue.filter(filterName, function(value[,arg1,arg2,...]){
// 進行一定的資料處理
return newValue
})
2). 使用過濾器
<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>
-->
<!--需求: 對當前時間進行指定格式顯示-->
<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="../js/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js"></script>
<script>
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>