Vue 2.0学习笔记:Vue的animation

上一节我们学习了Vue 2.0中的<transition>实现元素从状态A到状态B的过渡效果。对于元素过渡的效果是通过CSS的transition来完成,具体什么时候执行是由Vue来控制的。而transition的效果毕竟有所限制,对于一些复杂的动效,还是需要通过别的方式来完成。在Vue中除了transition之外还可以完成animation的效果。也就是可以将CSS的animation运用到Vue中来,实现一些动画效果。今天这篇文章我们就来学习如何在Vue运用CSS的animation

CSS中的函数

大家都知道,CSS只是一个声明式的语言,主要为标记语言服务。很多程序员鄙视它,有一部分原因是CSS并不像其他程序语言一样,具有一些逻辑能力以及函数功能等特性。随着CSS的不断变革,其慢慢地也变得越来越强大。时至今日,CSS中也有具有函数和运算相关的能力。比如我们今天要聊的CSS函数。在CSS Values and Units Module Level 4中把函数标记(Functional Natations单独提取出来做为该规范的一部分。而这部分主要介绍了一些具有数学计算能力相关的属性值,比如大家熟悉的calc()和不怎么熟悉的min()max()。而我们今天要聊的是CSS中的函数,其中就包括这些部分。如果大家感兴趣,欢迎继续往下阅读。

Vue 2.0学习笔记:Vue的transition

动效在Web中一直是一个有争议的问题。动效做得好有助于在你的Web程序上锦上添花,甚至是留住你的用户,也可以具有较好的用户体验;反之,如果动效运用的不好,会给用户带来一种反感,让用户迅速地离开你的应用。怎么提供更友好的动效,并不是今天我们要讨论的重点,我们要讨论的是:在Vue应用程序中如何添加动效?在Vue中,提供了多种方法来给你的运用程序添加动效,比如CSS的transitionanimation动效,以及在Vue的生命周期的钩子函数中操作DOM。甚至你还要以使用第三方动画库,比如GSAPVelocity.js来制作动效。

如何更好的控制按钮样式

在Web页面或应用程序中都可能会有按钮的出现,甚至很多时候链接的样式看起来也像个按钮。那么我们应该怎么来美化按钮的样式呢?在这篇文章中,我们一起来聊聊按钮样式应该怎么才能更好的控制。

图解CSS:CSS层叠和继承

CSS中有三个概念是学习CSS必须要掌握的:层叠继承权重。今天我们主要来了解CSS中的层叠和继承,对于CSS权重这一部分将放到CSS的选择器中来介绍,因为这一部分和CSS的选择器耦合的更为紧密。不管是初学者还是有一定工作经验的同学,花点时间阅读这篇文章都是很有必要的,这样有利于你对CSS更清楚的了解和理解。感兴趣的同学请继续往下阅读。

有关于CSS的一些新东西

上个月2018年TPAC会议刚结束没多久,@Rachel Andrew在Smashing Magazine上面就发表了一篇文章《The CSS Working Group At TPAC: What’s New In CSS?》介绍了CSS中将会有的一些新东西,同时我们国内@安佳 大大也发了一篇有关于参加该会议的总结。就在这个月,@Rachel Andrew在瑞典.马尔默举办的2018年Øredev 开发者大会上分享了一个话题就是有关于CSS的一些新东西,同时她还分享了另一个话题《2019年布局有哪些工具包》。我阅读了@Rachel Andrew在该会议上分享的两个话题,但今天主要想根据@Rachel Andrew分享的第一个话题做一些总结:CSS有哪些新东西。希望对大家有所帮助。

聊聊Flexbox布局中的flex的演算法

到目前为止,Flexbox布局应该是目前最流行的布局方式之一了。而Flexbox布局的最大特性就是让Flex项目可伸缩,也就是让Flex项目的宽度和高度可以自动填充Flex容器剩余的空间或者缩小Flex项目适配Flex容器不足的宽度。而这一切都是依赖于Flexbox属性中的flex属性来完成。一个Flex容器会等比的按照各Flex项目的扩展比率分配Flex容器剩余空间,也会按照收缩比率来缩小各Flex项目,以免Flex项目溢出Flex容器。但其中Flex项目又是如何计算呢?他和扩展比率或收缩比率之间又存在什么关系呢?在这篇文章中我们将一起来探来。

聊聊双11互动主动法中前端技术亮点

在上一篇《手淘Web页面Bar和纵向适配的设计》中聊了互动项目中Bar的工业化标准设计以及对刘海设备带来的变化。我把这一点称为标准化Bar设计给适配带来的优势。今天这篇文章中主要想再花点时间聊聊今年手淘“PK赢能量”互动项目中前端有哪些技术亮点和尝鲜。当然文章涉及到的技术点估计有很多同学都有接触或者使用过。毕竟CSS仅仅是一门表现层语言。废话不多说,直接进入主题吧!

Flexbox vs Grid:基本概念

整个Web在不断的演进,那么为Web服务的理念与技术等等也在不断的进行演化。那么我们今天要聊的话题,Web布局中最为优秀的两种布局方式:Flexbox布局CSS Grid布局。有关于这两方面的知识,其实在W3cplus上已经有很多相关的内容。由于这两种布局方式对Web布局带来了很多改变,而且两者都有其自身的优势。正因为如此,很多同学总是会类似的一个问题:应该使用Flexbox还是Grid来进行布局?那么我们从这篇文章开始,将会分几篇文章一起来介绍Flexbox布局和CSS Grid布局两者的差异性?我们又应该如何的选择,才能更适合我们项目的布局?希望接下来的内容对大家有所帮助。

CSS Grid带来的新单位:分数单位fr

CSS Grid经过这么多年的发展已经越来越受人青眯了,到目前为止支持率得到近88%的比例。经过这么多年的跟踪和学习,对CSS Grid的特性也是略有所知,但还未达到完全的融汇贯通。因为它有很多的特性,而且这些特性对于CSSer来说很多都是新的概念,比如我们今天要说的分数单位fr就是一个新东东。那么这篇文章,咱们就来一起看看这个特性有什么特性,给我们又能带来什么好处。感兴趣的同学,请继续往下阅读。

页面

返回顶部