vue2.0-transition配合animate.css
2024-08-31 14:49:35
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
p{
width:100px;
height:100px;
background: red;
margin:0 auto;
}
</style>
<script src="vue.js"></script>
<link rel="stylesheet" href="animate.css">
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
show:false
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show"> <transition enter-active-class="bounceInLeft" leave-active-class="bounceOutRight">
<p v-show="show" class="animated"></p>
</transition>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
p{
width:100px;
height:100px;
background: red;
margin:0 auto;
}
</style>
<script src="vue.js"></script>
<link rel="stylesheet" href="animate.css">
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
show:false
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show"> <transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight">
<p v-show="show" class="animated"></p>
</transition>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
p{
width:100px;
height:100px;
background: red;
margin:0 auto;
}
</style>
<script src="vue.js"></script>
<link rel="stylesheet" href="animate.css">
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
show:false
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show"> <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
<p v-show="show"></p>
</transition>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
p{
width:100px;
height:100px;
background: red;
margin:0 auto;
}
</style>
<script src="vue.js"></script>
<link rel="stylesheet" href="animate.css">
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
show:false
},
transitions:{ //错的
enterActiveClass:'zoomInLeft',
leaveActiveClass:'zoomOutRight'
}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="点击显示隐藏" @click="show=!show"> <transition name="transitions">
<p v-show="show" class="animated"></p>
</transition>
</div>
</body>
</html>
最新文章
- weui 弹框中的单选效果
- 用ffmpeg合并音频文件
- C# random helper class
- 逻辑思维面试题-java后端面试-遁地龙卷风
- BZOJ4078 : [Wf2014]Metal Processing Plant
- MFC编程入门之八（对话框：创建对话框类和添加控件变量）
- java基础学习总结——this关键字
- tldr 的安卓客户端
- GitHub指南
- crtbegin_dynamic.o: No such file: No such file or directory
- Spring中的p标签(转)good
- Java中this关键字的作用
- 【Tomcat】重新打war包
- Cocos2D:塔防游戏制作之旅(一)
- C#List<object>排序
- LODOP、C-Lodop简短排查语句
- const，static，volatile关键字的作用
- shiro实战系列(四)之配置
- 用c语言实现三子棋
- Visual Studio发展历程初浅调研