过渡 & 动画
过渡指的是 用 css3 的transition来实现动画效果
动画指的是用 js来实现动画效果
Vue中一共给了四种解决方案, 但是我们常用的只有一种
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库,如 Animate.css 【推荐】
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库,如 Velocity.js
推荐的那种
<!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>
<script src="../../../basic-source/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<button @click = " f = !f "> change </button>
<transition
name = 'yyb'
mode = "in-out"
enter-active-class = 'animated slideInLeft'
leave-active-class = 'animated slideOutLeft'
>
<p v-if = "f"> 内容 </p>
</transition>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
f: true
}
})
</script>
</html>
<!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>
<script src="../../../basic-source/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<transition
name = 'yyb'
mode = "out-in"
enter-active-class = 'animated slideInLeft'
leave-active-class = 'animated slideOutLeft'
>
<button @click = 'f = !f' v-if = "f"> on </button>
</transition>
<transition
name = 'yyb'
mode = "out-in"
enter-active-class = 'animated slideInRight'
leave-active-class = 'animated slideOutRight'
>
<button @click = 'f = !f' v-if = "!f"> off </button>
</transition>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
f: true
}
})
</script>
</html>