vue2.0 动画
2024-09-11 15:18:32
//先来一个简单的入场
<template>
<div id="box">
<input type="button" value="按钮" @click="toggle">
<transition name="fade">
<div id="div1" v-show="bSign"></div>
</transition>
</div>
</template>
<script>
export default{
data(){
return{
bSign:true
}
},
methods:{
toggle(){
this.bSign=!this.bSign;
}
}
}
</script>
<style>
#div1{
width:100px;
height:100px;
background: red;
}
.fade-enter-active,.fade-leave-active{
transition: all .3s ease;
opacity: 1;
transform: translateX(0px);
}
.fade-enter,.fade-leave-to{
transform: translateX(10px);
opacity: 0;
}
</style>
再来一个引用animate.css
<template>
<div id="box">
<input type="button" value="按钮" @click="toggle">
<transition name="fade" enter-active-class="animated zoomInLeft"
leave-active-class="animated zoomOutRight">
<div id="div1" v-show="bSign"></div>
</transition>
</div>
</template>
<script> export default{
data(){
return{
bSign:true
}
},
methods:{
toggle(){
this.bSign=!this.bSign;
}
}
}
</script>
<style>
#div1{
width:100px;
height:100px;
background: red;
margin:80px;
}
/* .fade-enter-active,.fade-leave-active{
transition: all .3s ease;
opacity: 1;
transform: translateX(0px);
}
.fade-enter,.fade-leave-to{
transform: translateX(10px);
opacity: 0;
} */
</style>
最新文章
- USACO翻译：USACO 2014 FEB SILVER 三题
- Python之with语句
- leetcode 127. Word Ladder ----- java
- sql查看数据库表使用情况
- stringstream字符串流
- Storm On YARN带来的好处
- asp.net MVC中的AppendTrailingSlash以及LowercaseUrls
- 3390: [Usaco2004 Dec]Bad Cowtractors牛的报复
- rowid去重（删除表的重复记录）
- 1，入门-Hello Soring Boot
- Python Pandas 库的使用例子
- Linq 连接运算符：Concat
- JavaScript中高阶函数
- 别开心太早，Python 官方文档的翻译差远了
- 盒模型的垂直居中css
- 酷狗.kgtemp文件加密算法逆向
- spring-data-mongo的MongoTemplate开发
- CSS3美化有序列表
- Netty实践一(数据通信)
- 随机数的生成 - rand(), srand()