transition标签搭配动画
Vue封装了一个标签 <transition>
来实现一个元素的显示与隐藏(v-show) 产生的过渡动画
第三方库这里用到animate.css
、 transition.css
(这个直接复制)
https://www.transition.style/#out:circle:center
https://www.dowebok.com/demo/2014/98/
下面两个案例自己复制看看效果!!!
5.9.1 animate.css
npm i animate.css
// 在 mian.js 全局安装
import animated from 'animate.css'
Vue.use(animated)
<template>
<div>
<button @click="show = !show;">点击</button>
<transition
enter-active-class="animate__animated animate__swing"
leave-active-class="animate__animated animate__backOutUp"
>
<!-- 导航下拉面板 -->
<div class="nav" v-show="show"></div>
</transition>
</div>
</template>
<script>
export default {
name:'Test',
data() {
return {
show: false
}
},
}
</script>
<style scoped>
.nav {
width: 100px;
height: 200px;
background: red;
}
</style>
如果在某个元素使用动画,可以设置持续时间和延时
div {
animation-duration: 2s;
animation-delay: 0.4s;
}
要修改其他配置 只能去修改源码?!
5.9.2 transition.css
1、需要手动复制动画 并将 [transition-style="..."]
改为类名
<template>
<div>
<button @click="show = !show;">点击</button>
<transition
enter-active-class="down"
leave-active-class="up"
>
<!-- 导航下拉面板 -->
<div class="nav" v-show="show"></div>
</transition>
</div>
</template>
<script>
export default {
name:'Test',
data() {
return {
show: false
}
},
}
</script>
<style scoped>
.nav {
width: 100px;
height: 200px;
background: red;
}
@keyframes wipe-in-down {
from {
clip-path: inset(0 0 100% 0);
}
to {
clip-path: inset(0 0 0 0);
}
}
.down {
animation: 1s cubic-bezier(.25, 1, .30, 1) wipe-in-down both;
}
@keyframes wipe-out-up {
from {
clip-path: inset(0 0 0 0);
}
to {
clip-path: inset(0 0 100% 0);
}
}
.up {
animation: 1s cubic-bezier(.25, 1, .30, 1) wipe-out-up both;
}
</style>