vue2.0 和 animate.css的结合使用
这里说的是vue2.0和animate.css的结合使用。其实用过就知道用法是比较简单的。但是就是刚开始使用的时候，难免有的会遇到各种问题。简单的说说我所用过并且遇过的坑。
首先是transition组件，在2.0中由transition属性变成了一个独立的组件。
用法：
1、
要用animate.css，那么首先需要做的就是导入它。局部的导入的话，就在当前的.vue文件中的style标签中导入：@import "animate.css"; 注意，导入css文件的时候。在末尾应该是要加上分号的。如果不加的话，会影响后面写的局部样式
2、
开始使用animate.css
上述是一个完整的结构。其中重要的几个点用箭头表示出来。首先在transition组件内部，需要定义两个基本的class类，表示过渡进来和过渡出去的时候所要配合使用的animate.css的类值。zoomInLeft/zoomOutRight是其中的一对儿。具体的其他效果可以查看animate.css的官网。其次在transition组件内部的话，需要过渡的子元素需要加上animated类。最后可能也是比较容易忽略的点（至少我就是）。这个v-show,看似好像是多余的，但是不加上的话，对于过渡效果是没有用的。因为过渡 是从一个无到有或者有到无的一个效果。最开始进来的时候如果元素本身就是show的，那么过渡就失效了。所以在元素上面需要加上这个v-show属性。在过渡效果进来的时候，v-show设置为true，相反为false。
还有一点是在上述代码中没有展现出来的，如果有多个子元素都要实现过渡，可以加上<transition-group></transition-group>进行包裹。
PS：下面看一段实例代码vue过渡和animate.css结合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<script type="text/javascript" src="vue.js"></script>
<link rel="stylesheet" type="text/css" href="animate.css" rel="external nofollow" >
<style type="text/css">
p {
width: 300px;
height: 300px;
background: red;
margin: 10px auto;
}
</style>
<script type="text/javascript">
window.onload = function(){
var app = new Vue({
el:'#box',
data:{
show:false
}
})
}
</script>
</head>
<body>
<div id="box">
<!-- 控制数据的值切换显示隐藏 -->
<button @click="show=!show">transition</button>
<!-- <transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
<p v-show="show" class="animated"></p>
</transition> -->
<!-- 第二种方法 -->
<!-- <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<p v-show="show"></p>
</transition> -->
<!-- 多元素运动 -->
<transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
<p v-show="show" class="animated" :key="1"></p>
<p v-show="show" class="animated" :key="2"></p>
</transition-group>
</div>
</body>
</html>
总结
以上所述是小编给大家介绍的vue2.0 和 animate.css的结合使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了关于el-tooltip使用\n换行的情况显示,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
Vue3提供了一种组合式API,可以用来构建可复用的组件和应用程序,下面这篇文章主要给大家介绍了关于如何创建Vue3项目及组合式API的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
在vue项目中使用element-ui的Upload上传组件的示例
本篇文章主要介绍了在vue项目中使用element-ui的Upload上传组件的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这两天在学习vue，主要是为了实现前后端的分离，因此数据的传输是必不可少的一个环节，这篇文章主要介绍了JSON数组和JSON对象在vue中的获取方法,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue elementUI 表单校验的实现代码（多层嵌套），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要介绍了vue中 根据时间戳 判断对应的时间（今天 昨天 前天）,需要的朋友可以参考下2019-12-12
这篇文章主要介绍了vue之计算属性的缓存computed的用法解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-11-11
今天小编就为大家分享一篇在vue中解决提示警告 for循环报错的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue3使用vueup/vue-quill富文本、并限制输入字数的方法处理
这篇文章主要介绍了vue3使用vueup/vue-quill富文本、并限制输入字数,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中，Vue.js有幸受到一定程度的关注，下面这篇文章主要给介绍了Vue.js实现表格动态增加删除的方法实例，文末提供了源码下载，需要的朋友可以参考借鉴。2017-01-01
最新评论