视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
vue2.0 和 animate.css的结合使用
2020-11-27 22:24:01 责编:小采
文档

 这里说的是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的结合使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

下载本文
显示全文
专题