随笔档案「2018年4月」 - gisery

移动端rem匹配

摘要：Rem是相对于根元素font-size大小的单位记inphone5屏幕宽度是 320px font-size16px 1rem=16px <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device 阅读全文

posted @ 2018-04-22 10:58 gisery 阅读(161) 评论(0) 推荐(0)

vue列表过渡效果

摘要：<transition-group></transition-group> ① 列表 <transition-group> </transition-group> 在页面渲染出来是个 span 标签，如果你想更改它用 tag 属性。例如 <transition-group tag="div"> < 阅读全文

posted @ 2018-04-22 00:16 gisery 阅读(259) 评论(0) 推荐(0)

vue动画使用javascript钩子函数

摘要：钩子函数从before-enter – enter –after-enter-entercancelled也是一个完整的生命周期 <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afte 阅读全文

posted @ 2018-04-21 23:59 gisery 阅读(274) 评论(0) 推荐(0)

vue使用animate.css类库实现动画

摘要：首先安装animate.css类库 cnpm install animate.css –save 然后在vue的script文件中引用使用方法如下 //使用duration来统一设置入场和离场时候动画 //还可以分别设置 :duration="{enter:200,leave:400}" <tra 阅读全文

posted @ 2018-04-21 23:11 gisery 阅读(11241) 评论(0) 推荐(0)

vue过渡动画

摘要：在vue中实现过渡动画，需要用到transition把需要被动画控制的元素包裹起来 <div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show"> 阅读全文

posted @ 2018-04-21 22:54 gisery 阅读(280) 评论(0) 推荐(0)

vue生命周期函数

摘要：Vue生命周期函数是vue实例在某一时间点会自动执行的函数 <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue 阅读全文

posted @ 2018-04-21 09:34 gisery 阅读(325) 评论(0) 推荐(0)

display:inline-block解决文字有间隙问题

摘要：定义：display:inline-block是使元素以块级元素的形式呈现在行内。意思就是说，让这个元素显示在同一行不换行，但是又可以控制高度和宽度，这相当于内联元素的增强。但是display:inline-block存在文字间隙问题 <div class="container"> <div cl 阅读全文

posted @ 2018-04-20 12:04 gisery 阅读(181) 评论(1) 推荐(0)