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">
- <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>
vue过渡和animate.css结合使用的更多相关文章
- vue中使用animate.css
一:使用animate.css的使用 1.安装npm install animate.css --save 2.在main.js中引入import animate from 'animate.css' ...
- vue 动画框架Animate.css @keyframes
<script src="vue.js"></script> <link rel="stylesheet" href=" ...
- vue中使用animate.css动画库
1.安装: npm install animate.css --save 2.引入及使用: //main.js中 import animated from 'animate.css' Vue.use( ...
- 048——VUE中使用animate.css动画库控制vue.js过渡效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 在vue中使用animate.css
animate.css是一款前端动画库,相似的有velocity-animate 用法: 首先 npm install animate.css --save 然后在vue文件的script中引入: i ...
- vue中使用animate.css实现动画
参考链接:https://www.cnblogs.com/ccyinghua/p/7872694.html 参考链接:https://www.jianshu.com/p/2e0b2f8d40cf 使用 ...
- vue2.0和animate.css的结合使用
animate.css是一款前端动画库,相似的有velocity-animate. 上述是一个完整的结构.其中重要的几个点用箭头表示出来.首先在transition组件内部,需要定义两个基本的clas ...
- vue2借助animate.css实现路由动画效果
第一步: npm install animate.css --save 第二步:打开main.js import animate from 'animate.css' Vue.use(animate) ...
- vue 结合 animate.css
这里说的是vue2.0和animate.css的结合使用.其实用过就知道用法是比较简单的.但是就是刚开始使用的时候,难免有的会遇到各种问题.简单的说说我所用过并且遇过的坑. 首先是transition ...
随机推荐
- winsshfs的快速入手
之前在公司使用mac ,并且通过mac下的osfuse和sshfs连接,直接将虚拟机的文件目录同步到了本地,并且可以进行实时操作修改,对于写项目,确实是省了很大一部分上传的精力. 于是在自己的win下 ...
- 前端开发面试题总结之——JAVASCRIPT(一)
___________________________________________________________________________________ 相关知识点 数据类型.运算.对象 ...
- wpf中子窗口的几个问题
今天研究了一下wpf中的窗口,写这篇文章来总结一下今天的收获.(转载请注明出处~) 总所周知,窗口是windows系统中十分重要的一个元素(从名字上就能体现出来),而一个应用程序总是包含很多窗口(主窗 ...
- java学习书籍推荐
1. Java 语言基础 谈到Java 语言基础学习的书籍,大家肯定会推荐Bruce Eckel 的<Thinking in Java >.它是一本写的相当深刻的技术书籍,Java 语言基 ...
- 3553: [Shoi2014]三叉神经树(树链剖分)
这道题特别恶心,首先我们可以发现更改的就是出现连续的一或二,那么就用线段树+树链剖分找到这个范围 想到是不难想,就是打起来恶心罢了= = CODE: #include<cstdio> #i ...
- 浅谈iOS程序员的成长和进阶
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- 导航原理实验系统软件——node-webkit初探
最近,和同学接手了一个某军校<导航原理>课程的教学实验平台软件开发工作. 本项目在客户端主要用到的技术便是node-webkit,使用它能够以Web的方式开发桌面应用程序.下面,就以本项目 ...
- ajax跨域请求时,sessionId不一样,导致无法记住登陆状态
遇到这样一个场景,就是前端的域是dev,请求接口时,接口的域是beta,即使在服务端设置了cookie存放的域,'COOKIE_DOMAIN' => '.roboming.com',虽然c ...
- Asp.Net 常用工具类之加密——对称加密DES算法(2)
又到周末,下午博客园看了两篇文章,关于老跳和老赵的程序员生涯,不禁感叹漫漫程序路,何去何从兮! 转眼毕业的第三个年头,去过苏州,跑过上海,从一开始的凌云壮志,去年背起行囊默默回到了长沙准备买房,也想有 ...
- C#基础——集合及特殊集合
集合 集合的基本信息: Systerm.Collections命名空间包含接口和类,这些接口和类定义各种对象(如列表.队列.位数组.哈希表和字典)的集合. Systerm.Collections.Ge ...