vue动画效果实现方法示例
更新时间：2019年03月18日 11:59:16 作者：白杨-M
这篇文章主要介绍了vue动画效果实现方法,结合完整实例形式分析了vue.js+animate.css实现的动画切换效果相关操作技巧,需要的朋友可以参考下
本文实例讲述了vue动画效果实现方法。分享给大家供大家参考，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>www.jb51.net vue动画</title>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/animate.css/2.0/animate.css" rel="external nofollow" />
<style>
#box{
width:400px;
margin: 0 auto;
}
#div1{
width:100px;
height:100px;
background: red;
}
</style>
</head>
<body>
<div id="box">
<input type="button" value="按钮" @click="toggle">
<div id="div1" class="animated" v-show="bSign" transition="bounce"></div>
</div>
<script>
new Vue({
el:'#box',
data:{
bSign:true
},
methods:{
toggle(){
this.bSign=!this.bSign;
}
},
transitions:{ //定义所有动画名称
bounce:{
enterClass:'zoomInLeft',//动画进入
leaveClass:'zoomOutRight'//动画离开
}
}
});
</script>
</body>
</html>
运行效果：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。
相关文章
在本篇文章中小编给大家分享了vue如何实现点击隐藏与显示的相关内容，有需要的朋友们跟着学习下。2019-02-02
这篇文章主要给大家介绍了关于Vue开发实践指南之应用入口的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-01-01
这篇文章主要介绍了vue3双向绑定实现原理解读,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue3.0组合式api的使用小结,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue3页面加载完成后如何获取宽度、高度问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
Vue.js中provide/inject实现响应式数据更新的方法示例
这篇文章主要介绍了Vue.js中provide/inject实现响应式数据更新，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要给大家介绍了关于vue中数据字典dicts的简单说明和用法的相关资料,如果您想在Vue中使用字典查询,您可以使用Vue的计算属性和方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-01-01
eact 和angular，vue 这三个框架最近都比较火，下面这篇文章主要给大家介绍了关于利用angular、react和vue实现相同的面试题组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。2018-02-02
这篇文章主要为大家详细介绍了vue项目nav导航栏的实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
这篇文章主要给大家介绍了关于如何使用Vue进行文件预览与打印功能的相关资料,这个功能其实也是自己学习到的,做完也有一段时间了,一直想记录总结一下,需要的朋友可以参考下2023-10-10
最新评论