<!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结合使用
-
最新LNMP(linux+nginx+mysql+php+laravel)服务器环境配置教程四
通过nginx运行php服务返回phpinfo()信息。
-
windows下如何github ssh 公钥
windows下如何github ssh 公钥
-
如何查看git项目在哪个路径
如何查看git项目在哪个路径
-
使用IntelliJ IDEA 14和Maven创建java web项目
使用IntelliJ IDEA 14和Maven创建java web项目
-
两列布局——左侧宽度固定,右侧宽度自适应的两种方法
关于左侧宽度固定,右侧宽度自适应两列布局的一种很常用的方法我相信大家都知道。就是利用左侧元素浮动,或者绝对定位的方式使其脱离常规文档流,让两个块级元素能够在同一行显示。然后右侧元素 margin-left 的值等于左侧元素宽度,这时右侧元素将紧挨着左侧元素
-
onhashchange监听url,hash变化
onhashchange监听url,hash变化
-
js 判断字符串是否包含某字符串,String对象中查找子字符,indexOf
js 判断字符串是否包含某字符串,String对象中查找子字符,indexOf