- 常用的小功能: 控制元素显示或隐藏(使用了element-ui)
<template>
<div class='main'>
<el-card :style="{ width: '300px' }">
<div slot="header" class="clearfix">
<span>卡片</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="handleClose = !handleClose">{{handleClose === true ? '隐藏':'显示'}}</el-button>
</div>
<transition name="bounce">
<div class="text item" v-if="handleClose">
<img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
</div>
</transition>
</el-card>
</div>
</template>
<script>
export default {
data() { // 这里存放数据
return {
handleClose: true
};
}
}
<style lang='scss' scoped>
.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);
}
}
</style>
效果展示:
点击显示,图片出现,点击隐藏,图片消失,期间可以使用动画来增加效果
提到vue中使用动画,那就顺便来提一下:
- 可以用到第三方 CSS 动画库,如 Animate.css <https://daneden.github.io/animate.css/>
- 在脚手架中使用 Animate.css的话 先
npm install animate.css --save
,然后在main.js中:import animate from 'animate.css'
Vue.use(animate);
,最后使用即可,附上部分API:
- 在脚手架中使用 Animate.css的话 先
fade: {
title: '淡入淡出',
fadeIn: '淡入',
fadeInDown: '向下淡入',
fadeInDownBig: '向下快速淡入',
fadeInLeft: '向右淡入',
fadeInLeftBig: '向右快速淡入',
fadeInRight: '向左淡入',
fadeInRightBig: '向左快速淡入',
fadeInUp: '向上淡入',
fadeInUpBig: '向上快速淡入',
fadeOut: '淡出',
fadeOutDown: '向下淡出',
fadeOutDownBig: '向下快速淡出',
fadeOutLeft: '向左淡出',
fadeOutLeftBig: '向左快速淡出',
adeOutRight: '向右淡出',
fadeOutRightBig: '向右快速淡出',
fadeOutUp: '向上淡出',
fadeOutUpBig: '向上快速淡出'
},
bounce: {
title: '弹跳类',
bounceIn: '弹跳进入',
bounceInDown: '向下弹跳进入',
bounceInLeft: '向右弹跳进入',
bounceInRight: '向左弹跳进入',
bounceInUp: '向上弹跳进入',
bounceOut: '弹跳退出',
bounceOutDown: '向下弹跳退出',
bounceOutLeft: '向左弹跳退出',
bounceOutRight: '向右弹跳退出',
bounceOutUp: '向上弹跳退出'
},
zoom: {
title: '缩放类',
zoomIn: '放大进入',
zoomInDown: '向下放大进入',
zoomInLeft: '向右放大进入',
zoomInRight: '向左放大进入',
zoomInUp: '向上放大进入',
zoomOut: '缩小退出',
zoomOutDown: '向下缩小退出',
zoomOutLeft: '向左缩小退出',
zoomOutRight: '向右缩小退出',
zoomOutUp: '向上缩小退出'
},
rotate: {
title: '旋转类',
rotateIn: '顺时针旋转进入',
rotateInDownLeft: '从左往下旋入',
rotateInDownRight: '从右往下旋入',
rotateInUpLeft: '从左往上旋入',
rotateInUpRight: '从右往上旋入',
rotateOut: '顺时针旋转退出',
rotateOutDownLeft: '向左下旋出',
rotateOutDownRight: '向右下旋出',
rotateOutUpLeft: '向左上旋出',
rotateOutUpRight: '向右上旋出'
},
flip: {
title: '翻转类',
flipInX: '水平翻转进入',
flipInY: '垂直翻转进入',
flipOutX: '水平翻转退出',
flipOutY: '垂直翻转退出'
},
strong: {
title: '强调类',
bounce: '弹跳',
flash: '闪烁',
pulse: '脉冲',
rubberBand: '橡皮筋',
shake: '左右弱晃动',
swing: '上下摆动',
tada: '缩放摆动',
wobble: '左右强晃动',
jello: '拉伸抖动'
}
其自定义过渡类名为:
-
enter-class
-
enter-active-class
-
enter-to-class
(2.1.8+) -
leave-class
-
leave-active-class
-
leave-to-class
(2.1.8+) -
可以配合钩子函数使用
-
可以用来渲染
v-if
,v-show
,以及动态组件,组件根节点- 常用过渡类名:
v-enter
v-enter-active
v-leave
v-leave-active
- 常用过渡类名: