Vue入门之animate过渡动画效果
更新时间：2018年04月08日 14:34:45 作者：锐小6
这篇文章主要介绍了Vue入门之animate过渡动画效果的相关资料,需要的朋友可以参考下
简介：
- transition方法的使用
- transition内置方法
- transition-group
animate库实现过渡动画
<!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="lib\vue.js"></script>
<link rel="stylesheet" href="lib\animate.css" rel="external nofollow" >
<style>
[v-cloak] {
display: none;
}
p {
width: 100px;
height: 100px;
background: red;
margin: 10px auto;
}
/* .fade-enter-active, .fade-leave-active {
transition: 1s all ease;
}
.fade-enter-active {
opacity: 1;
width: 300px;
height: 300px;
}
.fade-leave-active {
opacity: 0;
width: 100px;
height: 100px;
}
.fade-enter, .fade-leave {
width: 100px;
height: 100px;
opacity: 0;
} */
</style>
<script>
window.onload = function() {
new Vue({
el: '#box',
data: {
show: '',
list: ['apple', 'banana', 'orange', 'pear']
},
computed: {
lists: function() {
var arr = [];
this.list.forEach(function(val) {
if (val.indexOf(this.show) != -1) {
arr.push(val);
}
}.bind(this))
return arr;
}
}
})
}
</script>
</head>
<body>
<div id="box" v-cloak>
<input type="text" v-model="show">
<!-- class定义 .fade
.fade-enter{} 初始状态
.fade-enter-active{} 进入过程
.fade-leave{} 离开状态
.fade-leave-active{} 离开过程
-->
<transition-group enter-active-class="zoomInLeft" leave-active-class="bounceOutRight">
<!-- 内置方法
@before-enter = "beforeEnter"
@enter = "enter"
@after-enter = "afterEnter"
@before-leave = "beforeLeave"
@leave = "leave"
@after-leave = "afterLeave"
-->
<!-- transition-group 多个元素运动，注意绑定key:1 -->
<p v-show="show" class="animated" v-for="(val, index) in lists" :key="index">
{{val}}
</p>
</transition-group>
</div>
</body>
</html>
总结
以上所述是小编给大家介绍的Vue入门之animate过渡动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了vue实现气泡运动撞击效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要为大家介绍了Element-ui中的Cascader级联选择器基础用法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要为大家介绍了vue组合式API浅显入门示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要为大家详细介绍了Vue3如何通过封装一个hooks实现实时获取麦克风音量功能,文中的示例代码讲解详细,需要的小伙伴可以参考一下2024-03-03
这篇文章主要介绍了vue iview 导航高亮动态设置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
下面小编就为大家分享一篇vue将对象新增的属性添加到检测序列的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
今天小编就为大家分享一篇vue keep-alive 动态删除组件缓存的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了echarts3如何清空上一次加载的series数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue去除#问题处理经过，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
本篇文章主要介绍了nginx部署访问vue-cli搭建的项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
最新评论