css js写在一起 vue_如何把vue2.0 和 animate.css合并在一起使用（详细教程）

animate.css是一款前端动画库，相似的有velocity-animate。这篇文章给大家介绍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。

还有一点是在上述代码中没有展现出来的，如果有多个子元素都要实现过渡，可以加上进行包裹。

PS：下面看一段实例代码vue过渡和animate.css结合使用

动画

p {

width: 300px;

height: 300px;

background: red;

margin: 10px auto;

}

window.onload = function(){

var app = new Vue({

el:'#box',

data:{

show:false

}

})

}

transition

上面是我整理给大家的，希望今后会对大家有帮助。

html+css+js写抽奖程序
html+css+js写抽奖程序简介:本文讲解,如何使用html+css+js写抽奖程序,后面也会加上后端,记录每一次的抽奖的结果. HTML结构这个html结构就十分的简单,几行而已. < ...
用HTML+CSS+JS写的切水果小游戏它来了
前言切水果游戏曾经是一款风靡手机的休闲游戏,今天要分享的就是一款网页版的切水果游戏, 由HTML+CSS+JS实现,虽然功能和原版的相差太大,但基本的功能具备,效果逼真.感兴趣的小伙伴可收藏学习(完 ...
用HTML+CSS+JS写了个烟花模拟器，一起看烟花了
家人闲坐,灯火可亲新年伊始,万象更新小碗汤在这里祝大家: 万事随想,所爱如山从此眼底是绮丽,周遭是晴明嘴角是笑意,耳畔是阜盛烟火心上凛冬散尽,星河长明今天不谈技术分享一款烟花模拟器如果 ...
html,css,js写消灭小星星游戏
首先,要写一个消灭小星星,必须考虑到有开始和重新开始两个功能,当点击小星星的时候,小星星消失,而且记录的分数随着小星星的消失而增加 HTML代码段 body{background-color: bla ...
h5游戏开发：用html+css+js写一个整蛊游戏
文章目录我来做一个简单的整蛊游戏吧! 第一步,先设计骰子第二步,设计行走的格子第三步,加入主角头像第四步,开始写游戏js控制代码最终结果,所有代码 (复制粘贴后改下图片路径和音乐媒体路径后就 ...
html+css+js写一个王者荣耀积分夺宝
在游戏里面,积分夺宝是很抽中好东西的,于是想自己写一个页面,实现无限抽奖,而且必中荣耀水晶. 在线演示地址先看效果(完整代码在后面): 开始要选择大区: 抽一次: 抽十次(一下中四个荣耀水晶,太爽了 ...
html毕业作业消消乐,html+css+js写一个简易功能的消消乐~~~~
1 2 3 4 content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-htm ...
HTML+CSS+JS商城网站设计——服装商城-功能齐全(40页) HTML+CSS 学生HTML个人网页作业作品下载个人商城网页设计制作大学生个人网站作业模板简单个人网页制作
HTML5期末大作业文章目录 HTML5期末大作业一.作品展示二.文件目录三.代码实现四.学习资料一.作品展示二.文件目录三.代码实现 <!DOCTYPE html> &l ...
HTML+CSS+JS`管理系统网站设计——学生信息管理系统模板 (13页) HTML+CSS+JavaScript html网页设计期末大作业_网页设计平时作业
HTML5期末大作业:管理系统网站设计--学生信息管理系统模板 (13页) HTML+CSS+JavaScript html网页设计期末大作业_网页设计平时作业常见网页设计作业题材有个人. 美食. ...

css js写在一起 vue_如何把vue2.0 和 animate.css合并在一起使用（详细教程）

css js写在一起 vue_如何把vue2.0 和 animate.css合并在一起使用（详细教程）相关推荐

最新文章

热门文章