<!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中动画分布解析
enter, enter-active, enter-active-to, (开始 进入阶段的)第1帧 属性值,到 (默认属性值 的过渡阶段),移除enter动画, leave, leave-active, leave-active-to (开始 离开 阶段的)第1帧 默认属性值,到 (属性值 的过渡阶段),移除leave动画
-
Meteor与express结合开发
Meteor本质上是一个已经公开了连接 http服务器的节点应用程序,这意味着您可以像下面这样定义服务器路由:,如果您坚持使用Express,则可以将Express路由注册为Connect中间件,如下所示:
-
nuxtjs引入jquery
nuxt引入jQuery库 nuxtjs如何添加 Webpack 插件?
-
throttle 和 debounce区别和用法
throttle 节流,debounce防抖
-
fieldset标签做输入框
比如 vuetify中的 input组件,就用到了fieldset做边框, 这个时候我们想改边框,却找不到border,因为fieldset是靠color来修改边框颜色的。
-
推荐几款vue滚动scroll插件
vue修改滚动条,平滑移动,下拉加载,上拉刷新,统统这里都有
-
列表加载动画 列表增加移除的动画
这个文章对于列表动画讲的横详细,顺便介绍下这个网站本身,https://cssanimation.rocks/又好多好看的动画展示哦
-
vue 翻页组件vue-flip-page效果
虽然不知道vue flip是干啥的,先记录下吧,以后可能会排上大用场哦。
-
Vue FLIP简单实现及理解
参考地址 Vue FLIP简单实现及理解 vue-flip翻转组件的 demo Vue Flip
-
axios并发操作
很多时候,我们需要同时向后端进行多个请求,当所有请求都返回数据后,再进行一些操作。