// 1. 标签一样的情况下 要设置key才能启动动画
// 2. mode可以指定不同的内容显示状态
// 3. transition里面的name属性可以自定义
<transition name="fade" mode="out-in">
<p v-if="show" key="1">one part </p>
<p v-else key="2">two part</p>
</transition>
<style>
/*自定义动画*/
.fade-enter-active,.fade-leave-active{
transition: opacity .5s ease-out;
}
.fade-enter, .fade-leave-active {
opactiy: 0;
}
</style>
过渡效果
参考:vue.js官网Vue.js 源码学习笔记Vue2.0源代码阅读 文件结构梳理 整体目录 源代码实现目录 模...
一. 下载Vue2.0的两个版本 开发版本(包含完整的警告和调试模式) 生产版本(删除了警告，30.67KB mi...
使用Vue2.0 router 过程中，会对route 会有混淆，现做笔记记录 一、$router router....
Vue2.0 Vue2.0实例 Vue2.0 组件 使用组件的细节 在 ttable > tbody > tr 使...
Vue2.0 学习 eslintignore.js 里写规范配置： module.exports= { root:...
v-on:绑定事件监听v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。...
一、v-for解决模板循环的问题， v-for指令是循环渲染一组data中的数组，如 如果只是想取到值可以这么写 ...
1、指令指令带有前缀 v-，以指示它们是 Vue.js 提供的特殊特性。也有一些其它指令，每个都有特殊的功能。例如...
Vue 笔记二：Vue2.0与1.0的区别 升级的区别 与angular的断层式升级不同，vue延续了自己的风格。...
本文标题：vue2.0学习笔记
本文链接：https://www.haomeiwen.com/subject/ckimfxtx.html
网友评论