vue 过渡的四种方式
程序员文章站
2022-03-03 09:16:41
...
过渡
1.vue中实现过渡或是动画一共提供了这样四种形式：
在 CSS 过渡和动画中自动应用 class — 自己写css3动画
可以配合使用第三方 CSS 动画库，如 Animate.css – 别人写好了类名，我们用
在过渡钩子函数中使用 JavaScript 直接操作 DOM – 自己用原生js来写动画
可以配合使用第三方 JavaScript 动画库，如 Velocity.js – 用别人写好的动画库
2. vue只要一使用transition组件就会自动添加6个类名 和 8 个钩子函数
6个类名 v-enter v-leave-to v-enter-active v-leave-active
-
transition组件如果有name选项，就可以将类名 v- 换成 ‘name’- 类名
-
使用第三方的css过渡库 animate.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./animate.css">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<button @click = 'flag = !flag'> 切换 </button>
<transition
name="fade" mode="out-in"
enter-active-class = "animated slideInLeft"
leave-active-class = "animated slideOutLeft"
>
<p v-show = 'flag'> 切换的内容 </p>
</transition>
<transition
name="fade" mode="in-out"
enter-active-class = "animated slideInLeft"
leave-active-class = "animated slideOutLeft"
>
<p v-show = '!flag'> 切换的内容 </p>
</transition>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
flag: true
}
})
</script>
</html>
动态组件：
动态组件是vue内部提供了一个叫做component的组件，这个组件身上可以通过绑定is属性来进行 组件的切换
keep-alive组件可以进行组件的内容缓存，将组件的内容存入浏览器缓存中，这样可以大大的节省街切换的事件
keep-alive 和 component动态组件两者常常一起搭配使用
<div id="app">
<button @click = " name = name === 'Aa'?'Bb':'Aa'"> 切换 </button>
<keep-alive include="">
<component :is = "name"></component>
</keep-alive>
</div>
<script>
Vue.component( 'Aa',{
template: '<h3> AA </h3>'
})
Vue.component( 'Bb',{
template: '<h3> BB </h3>'
})
new Vue({
el: '#app',
data: {
name: 'Aa'
}
})
</script>
上一篇： vue路由的四种跳转方式