草庐IT

ng-animate

全部标签

Ng-Matero v15 正式发布

前言Angular按照既定的发版计划在11月中旬发布了v15版本。推迟了一个月(几乎每个版本都是这个节奏?),Ng-Matero也终于更新到了v15。其实Ng-Matero本身的更新非常简单,但是同步维护的MaterialExtensions这个库要先于Ng-Matero发布,所以大部分精力都耗费在组件库上面了。我已经很久没有写关于Ng-Matero的发版文章了。上次介绍发版还是v10版本,竟然已经是两年前的事情了。在这两年的开源生涯中,主要精力都在Material的扩展组件库上面。值得兴奋的是,就在2022即将过去时,MaterialExtensions的周下载量终于破万了?,六月份时这个数

Ng-Matero v15 正式发布

前言Angular按照既定的发版计划在11月中旬发布了v15版本。推迟了一个月(几乎每个版本都是这个节奏?),Ng-Matero也终于更新到了v15。其实Ng-Matero本身的更新非常简单,但是同步维护的MaterialExtensions这个库要先于Ng-Matero发布,所以大部分精力都耗费在组件库上面了。我已经很久没有写关于Ng-Matero的发版文章了。上次介绍发版还是v10版本,竟然已经是两年前的事情了。在这两年的开源生涯中,主要精力都在Material的扩展组件库上面。值得兴奋的是,就在2022即将过去时,MaterialExtensions的周下载量终于破万了?,六月份时这个数

Angular样式隔离(style isolation)及选择器(:host, :host-context, ::ng-deep)的使用

1.Angular样式隔离Angular样式隔离的好处最最要的一条就是CSS的可维护性。当没有样式隔离时,我们创建一个组件并添加样式后,可能会影响到其他的组件样式,而且很有可能查找不出问题所在。虽然我们可以想出办法来避免样式被覆盖,但是可能会引发CSS的可维护性问题。Angular的视图封装(ViewEncapsulation)在Angular中,组件的样式可以封装在组件的宿主元素中(host),这样它们就不会影响应用程序的其他部分。视图封装模式:1.ViewEncapsulation.ShadowDom:Angualr使用浏览器内置的ShadowDomAPI将组件的视图封装在ShadowRo

Angular样式隔离(style isolation)及选择器(:host, :host-context, ::ng-deep)的使用

1.Angular样式隔离Angular样式隔离的好处最最要的一条就是CSS的可维护性。当没有样式隔离时,我们创建一个组件并添加样式后,可能会影响到其他的组件样式,而且很有可能查找不出问题所在。虽然我们可以想出办法来避免样式被覆盖,但是可能会引发CSS的可维护性问题。Angular的视图封装(ViewEncapsulation)在Angular中,组件的样式可以封装在组件的宿主元素中(host),这样它们就不会影响应用程序的其他部分。视图封装模式:1.ViewEncapsulation.ShadowDom:Angualr使用浏览器内置的ShadowDomAPI将组件的视图封装在ShadowRo

css3 animate steps帧动画

css3animatesteps帧动画背景图如下:宽度是270px,每个方块是等宽的45px。1.png#step{width:45px;height:45px;border:1pxsolid#ccc;background:url(../images/1.png)no-repeatleftcenter;animation:goStepinfinite3ssteps(6,end);}@keyframesgoStep{0%{background-position:00;}100%{background-position:-270px0;}}如果steps有第二个参数,把一张width:270px的

css3 animate steps帧动画

css3animatesteps帧动画背景图如下:宽度是270px,每个方块是等宽的45px。1.png#step{width:45px;height:45px;border:1pxsolid#ccc;background:url(../images/1.png)no-repeatleftcenter;animation:goStepinfinite3ssteps(6,end);}@keyframesgoStep{0%{background-position:00;}100%{background-position:-270px0;}}如果steps有第二个参数,把一张width:270px的

CSS3中Transition过渡、Animation动画、Transform之2D&3D变换总结

css3中transition和animation都能够实现动画效果,所谓动画本质就是物体的一种状态变换成另外一种状态的过程呈现,我们可以结合2D或者3D变换做出很多酷炫的动画,下面针对这四部分分别做一个用法上的小结。一、Transition过渡1.定义过渡动画:是从一个状态渐渐地过渡到另外一个状态经常:hover等等一起搭配使用,也就是说一般会经过一个动作触发之后,再进行变换。2.用法transition:要过渡的属性花费时间运动曲线何时开始;属性:想要变换的css属性,宽度、高度、背景颜色、内外边距都可以,如果想要所有的属性都变化过渡。花费时间:单位是秒(必须写单位)比如0.5s运动曲线:

CSS3中Transition过渡、Animation动画、Transform之2D&3D变换总结

css3中transition和animation都能够实现动画效果,所谓动画本质就是物体的一种状态变换成另外一种状态的过程呈现,我们可以结合2D或者3D变换做出很多酷炫的动画,下面针对这四部分分别做一个用法上的小结。一、Transition过渡1.定义过渡动画:是从一个状态渐渐地过渡到另外一个状态经常:hover等等一起搭配使用,也就是说一般会经过一个动作触发之后,再进行变换。2.用法transition:要过渡的属性花费时间运动曲线何时开始;属性:想要变换的css属性,宽度、高度、背景颜色、内外边距都可以,如果想要所有的属性都变化过渡。花费时间:单位是秒(必须写单位)比如0.5s运动曲线:

关于ios:UIWindow endDisablingInterfaceAutorotationAnimated: 错误

UIWindowendDisablingInterfaceAutorotationAnimated:error当用户在MFMailComposerViewController中并按下主页按钮时,我收到以下错误:[UIWindowendDisablingInterfaceAutorotationAnimated:]calledon>withoutmatching-beginDisablingInterfaceAutorotation.Ignoring.我浏览了论坛,其他一些人在不同的情况下都遇到过这个错误,但没有解决方案。我在应用程序的所有视图控制器中都设置了shouldAutorotate:1

关于ios:UIWindow endDisablingInterfaceAutorotationAnimated: 错误

UIWindowendDisablingInterfaceAutorotationAnimated:error当用户在MFMailComposerViewController中并按下主页按钮时,我收到以下错误:[UIWindowendDisablingInterfaceAutorotationAnimated:]calledon>withoutmatching-beginDisablingInterfaceAutorotation.Ignoring.我浏览了论坛,其他一些人在不同的情况下都遇到过这个错误,但没有解决方案。我在应用程序的所有视图控制器中都设置了shouldAutorotate:1