vue动画效果配置和弹层css sticky footer
vue动画效果配置
有两种方式:
一种是css方式
需要注意 4 个(CSS)类名在 enter/leave 的过渡中切换:
v-enter: 定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。
v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效,在 transition/animation 完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。
v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效,在 transition/animation 完成之后移除。
一般的使用方式是:
在html里面用transition包裹起来,然后建立一个name,这个name对应css的class名字的前缀,例如这里name是fade,class就是fade前缀命名
html代码
<transition name="fade">
</transition>
css代码
&.fade-enter-active, &.fade-leave-active
&.fade-enter, &.fade-leave-active
总的来说:在enter里面会代表状态从没有到有的变化,在leave里面会代表状态从有到没有的变化,在使用的时候可以按照需要使用,需要考虑好动画的变化再开始写代码
一种是js钩子的方式
methods: {// --------// 进入中// --------beforeEnter: function (el) {// ...},// 此回调函数是可选项的设置// 与 CSS 结合时使用enter: function (el, done) {// ...done()},afterEnter: function (el) {// ...},enterCancelled: function (el) {// ...},// --------// 离开时// --------beforeLeave: function (el) {// ...},// 此回调函数是可选项的设置// 与 CSS 结合时使用leave: function (el, done) {// ...done()},afterLeave: function (el) {// ...},// leaveCancelled 只用于 v-show 中leaveCancelled: function (el) {// ...}
}
一般的使用方式是
<transition @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
</transition>
通过绑定js方法来实现
总的来说:js钩子会更加细腻,会在变化的过程中也加入一个钩子管理变化,其他跟css方式动画差不多
详情参考:官网
弹层和css sticky footer原理
css sticky footer解释:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送。
详细参考:
这里主要使用clearfix这个类的伪类来完成.
原理简述如下:
在IE6, 7下zoom: 1会触发hasLayout,从而使元素闭合内部的浮动。
在标准浏览器下,.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素,从而达到清除浮动的作用。
在需要清除浮动的时候,只要写一个.clearfix就行了,然后在需要清浮动的元素中 添加clearfix类名就好了
防止Collapsing margins(外边距折叠)
保证跨浏览器的兼容性
相关代码如下:
.clearfix:before, clearfix:after {content: "."; display: block; clear: both; visibility: hidden;line-height: 0; //行高为0height: 0; //高度为0font-size:0; //字体大小为0
}.clearfix { *zoom:1;} //这是针对于IE6的,因为IE6不支持:after伪类,这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。
备注:
zoom: 1
为了兼容 IE6/7,在IE6, 7下zoom: 1会触发hasLayout,从而使元素闭合内部的浮动。:before
用来防止 top-margin collapse 和保证当 IE6/7 应用 zoom:1 时的是视觉一致性:after
用来清除浮动visibility: hidden
可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间,只是看不到而已clear: both
清除左右两边浮动display: block
需要将元素转为块级元素才可以实现效果,inline-block也可以content: "."
内容为“.”就是一个英文的句号而已。也可以不写。line-height: 0
行高为0,设置这些主要是为了避免一些占用位置或者间隔的问题height: 0
高度为0,同上font-size:0
字体大小为0,同上
另外需要注意的是避免Collapsing margins(外边距压扁)
有两种情况会引起 Collapsing margin:
父子元素(不一定是直接父子)之间会发生 margin-top 和 margin-bottom 的折叠 (如果之间没有 border、padding、inlne-content、height、min-height、max-height 分割的话) 这篇讨论 http://stackoverflow.com/questions/9519841/why-does-this-css-margin-top-style-not-work 很好的演示了这点
邻近元素同时设置margin,前面的margin-bottom 和后面的margin-top融合取最大的
所以这里能够实现避免Collapsing margins是因为
父子的话,给父元素添加.clearfix
紧邻的话,给前一个元素添加.clearfix
这样主要利用 :before psudo-element 给元素内部前面添加一个空的元素 display:block 保证它是一个BFC(BFC可以隔断外边距折叠)
课程里面使用
因为clearfix是一个比较常用的class,所以在base.styl里面添加,方便其他组件调用
.clearfixdisplay: inline-block&:before, &:aftercontain: ''height: 0line-height: 0clear: bothvisibility: hidden
这里没有去兼容ie6,7,因为移动端基本不包含这些浏览器
使用inline-block是因为做的是行内块处理
在Header.vue里面使用
<div class="detail"><div class="detail-wrapper clearfix"></div><div class="detail-close"></div></div>
先用一个div包裹其需要做css sticky的内容,如detail的div
然后footer是detail-close按钮,而需要显示并且要持续撑开的内容块是detail-wrapper,那么在detail-wrapper上添加一个clearfix 的class,就会在这个元素后面使用after的伪类生成内容,从而不断推开footer
参考地址:
http://nicolasgallagher.com/micro-clearfix-hack/
clearfix 引发的思考
css用clearfix清除浮动
vue动画效果配置和弹层css sticky footer相关推荐
- Vue 动画效果 及 Animate的基本使用
Vue 动画效果 及 Animate的基本使用 运用原来的css代码编写动画,但是动画的类名在Vue是有规定,在进入的时候使用v-enter-active,离开的时候使用v-leave-active ...
- vue动画效果-定义动画帧过度效果集成第三方动画animate.css
1.定义动画帧 <template><div><button @click="isShow=!isShow">显示/隐藏</button& ...
- android 按钮点击动画效果_如何用纯css打造类materialUI的按钮点击动画并封装成react组件...
作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ant-design-vu ...
- Vue 动画效果、过渡效果
文章目录 动画效果 过渡效果 单个元素 多个元素 Animate.css 总结 todolist 增加动画效果 动画效果 新建 Test.vue <template><div> ...
- vue 动画效果会闪动
今天在写vue路由切换动画时 动画执行总会先闪一下,代码如下: 后来多方查找原因,才发现是 transition标签少加了一个属性 mode="out-in" 加上后完美解决!!! ...
- 【转贴】CSS Sticky Footer: 完美的CSS绝对底部
原贴地址:http://parandroid.com/css-sticky-footer/ 在帕兰映像中看到一篇好文,将它转贴到这儿. CSS的简单在于它易学,CSS的困难在于寻找更好的解决方案.在C ...
- css sticky footer实现,css sticky footer经典布局
什么是sticky footer布局? 一般指手机页面中,当内容高度撑不满一屏时,页脚紧贴屏幕底部:当内容高度超过一屏时,页脚紧随其后. 方法一:flex弹性盒子布局 父容器container的dis ...
- Vue动画——使用最新版Animate.css教程
目录 1. 安装Animate.css 2. 配置 Animate.css 3. 在指定元素上使用 4. 在过渡动画中使用 5. 经典范例 -- 页面向下滚动到指定位置时,顶部显示悬浮搜索框 6. a ...
- vue如何使用原生js写动画效果_Vue中的动画效果
Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css ...
最新文章
- 使用 nginx 同域名下部署多个 vue 项目,并使用反向代理
- php协议任意文件读取
- 10_css控制背景与css精灵.txt
- java查题小程序_求助大神来写一个java的小程序,题目如下
- PAT-Travel Plan (30)-Dijkstra和SPFA
- 【Maven由浅入深】1.maven初体验
- WBE前端笔记1:HTML中一些不熟悉的标签
- 安装拼音加加时出现问题
- 使用矩阵分解找到相似歌曲
- 计算机图形学最新发展的技术,浅析计算机图形学应用及技术发展趋势.doc
- C++ 保留小数位数
- NOIP常考模板粗略集合包
- 【CSDN软件工程师能力认证学习精选】 JavaEE 13个核心规范
- 红楼梦人物出场统计python_红楼梦有多少人物统计(一)
- python实现奇异值分解_如何用python实现SVD分解呢?
- 【LaTex】 - 对齐符号的用法,换行符\\的用法,Misplaced 错误怎么解决
- 2022年团体程序设计天梯赛C++个人题解附带解题思路
- HTML5 canvas绘制太阳系各行星(包括月球的公转)
- 南京邮电大学数据结构实验四(各种排序算法)
- w10无法访问其他计算机,win10系统下网上邻居不能访问其他电脑的解决方法