vue动画
来源:互联网 发布:网络解决方案 编辑:程序博客网 时间:2024/06/11 17:08
<div id="box">
<input type="button" value="按钮" @click="toggle" name="">
<div id="div1" v-show="bSign" transition="fade"></div>
</div>
style
.fade-transition{transition: 1s all ease;} // transition="fade" css后面要添加 transitio
.fade-enter{opacity: 0;} //进入时动画
.fade-leave{opacity: 0; transform: translateY(-500px);} //离开时动画
.fade-transition{transition: 1s all ease;} //css名字要加一个-transition
动画分为 进入 .fade-enter
退出 .fade-leave
下载 animate.css
bower install animate.css
<link rel="stylesheet" type="text/css" href="./bower_components/animate.css/animate.css">
<div id="box">
<input type="button" value="按钮" @click="toggle" name="">
<div id="div1" v-show="bSign" class="animated" transition="bounce"></div>
</div>
new Vue({
el:'#box',
data:{
bSign:true
},
methods:{
toggle:function(){
this.bSign=!this.bSign
}
},
transitions:{ //定义所有动画名称
bounce:{ //节点 transition="bounce" 名字
enterClass:'zoomInLeft', //这个进入动画名字就是animated动画库名字
leaveClass:'zoomOutRight' //离开时动画名字
}
}
})
- vue动画
- Vue动画
- vue动画
- vue动画
- vue动画
- vue+vue-router转场动画
- Vue动画 和 Vue路由
- vue 动画过渡
- vue动画transition
- vue动画 -组件
- Vue之过渡动画
- Vue动画实现
- Vue相关(过渡动画)
- vue-cli 动画效果
- vue过渡动画
- vue过渡动画
- Vue 动画(过渡)
- vue初始化动画加载
- stm32学习笔记之用systick写delay
- 如何用android自带的设置功能(PreferenceActivity),快速给你的应用添加设置
- 内省、JavaBean、PropertyDescriptor类、Introspector类、BeanUtils工具包、注解、Rentention、Target、注解的基本属性和高级属性
- 直方图的均衡化
- RPG Develop Diary
- vue动画
- JVM Class详解之一
- 2017222 Part 1 数据结构及算法(二)
- Zygote进程源码分析之二
- JVM Class字节码之三-使用BCEL改变类属性
- GTSAM 的使用
- Codeforces768B Code For 1
- Java ClassLoader详解
- java中Comparator的用法(用于集合对象或数组对象进行排序)