专栏首页经年隔世特效组件流程分析

特效组件流程分析

特效组件流程分析

transition和animation的选择: 【1】两者的第一点区别,触发条件不同,transition通常和hover等事件配合使用,由事件触发,不立即执行。animation则和gif动态图差不多,立即播放。 animation不能用事件触发。(解决方法:通过点击以后添加类名,执行动画。比如动画时长1s,在点击函数中加动画类名,然后设置倒计时1s,1s动画执行完后再去除这个动画类名即可) 【2】两者第二点区别,transition无法重复执行动效。而animation可以设定循环次数。 【3】两者的第三点区别,animation与js的交互不是很紧密。 两者真正的区别是,animation写死了各个属性的变化值,使其不容易被js改写,但是可以在不同的动画类名之间选择(比如设置fade动画,需要对fade效果做改变,不太好进行。切换/skew); 而transition的属性值则是可以发生改变。 【4】两者各自的优势 其实两者的区别都可以用一些方式去弥补,只是哪个更便利。

  1. 如果要灵活定制多个帧以及循环,用 animation.
  2. 如果要简单的from to 效果,用 transition.
  3. 如果要使用js灵活设定动画属性,用 transition.
<script>
    var fontStyle = document.createElement('style');
    fontStyle.appendChild(document.createTextNode("\
    @font-face {\
        font-family: tencentFont;\
        src: url('https://node.video.qq.com/x/services/fontmin?font=tencent&text=" + encodeURIComponent( '邀请成员与审批角色权限管理微信渠道接入网站人工服务设置在线客服操作指引会话查询机器新建知识库智能学习未知问题预小程序登录台云注册统计' ) + "');\
    }\
    "));
    document.head.appendChild(fontStyle);
</script>

参考案例:单个特效组件fade如下

@mixin hardwareAccel() {
  transform:perspective(1px) translateZ(0);
}

@mixin improveAntiAlias() {
	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

@mixin forceBlockLevel() {
	display: inline-block;
	vertical-align: middle;
}

@mixin hacks() {
	@include forceBlockLevel();
	@include hardwareAccel();
	@include improveAntiAlias();
}

@mixin fade {
	@include hacks();
	overflow: hidden;
	transition-duration: 0.3s;
	transition-property:color, background-color;
	&:hover,
	&:focus,
	&:active {
		background-color: $activeColor;
		color: white;
	}
}

SCSS插值语句

语法:
#{}

//编译前
$height:10px;
$name:height;
/*
 * @author:#{$name}
 */
.div-#{$name}{
  #{$name}: #{$height};
};

//编译后
/*
 * @author:height
 */
.div-height {
  height: 10px; }


实用例子:
$nameSpace: 'hvr' !default;

END

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 关于一些动态创建的节点无法绑定事件的问题

    使用JQ提供的.on()和.delegate()方法可以解决解决此问题,给动态加载的元素成功绑定上事件,但是在这两种方法的参数中一定得写上我们需要绑定事件的...

    colezhou
  • 今天创建了个人博客

    此问题的解决方法是:修改根目录下的配置文件_config.yml,修改deploy节点。原因是没有配置正确的git仓库地址。

    colezhou
  • iconfont矢量图标旋转晃动

    首先我参考百度上的一些说法尝试了设置旋转中心点(transform-origin)、设置定位(position)、浮动(float)、以及使用tran...

    colezhou
  • 今年的Java面试已经和2年前完全不一样了!

    大家都知道程序员涨薪主要还是要靠跳槽来完成!但是我们都知道,无论是考试,还是求职,这个难度,参加人数是影响难度的一个很大因数(当然特别牛逼的大佬可以忽略这句话)...

    用户1516716
  • 黑产代码解密--利用canvas加载代码

    前段时间获取到黑产的一些代码,不得不感叹黑产的代码实在在写的是好得很,思路巧妙,环环相扣。不得不说,技术不好,黑产都做不了了。虽然分析了好多天,但是也只是一知半...

    madneal
  • 2019年了,你还不会CSS动画?

    今年我面试了很多同学,只要看到简历上写“熟练掌握CSS3”的,我都会问问动画相关知识。然而我发现:都 2019 年了,还有很多同学不会 CSS 动画。

    Nealyang
  • 基于 WebGL 的 HTML5 楼宇自控 3D 可视化监控

    智慧楼宇和人们的生活息息相关,楼宇智能化程度的提高,会极大程度的改善人们的生活品质,在当前工业互联网大背景下受到很大关注。目前智慧楼宇可视化监控的主要优点包括:

    HT for Web
  • 基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控 顶

    智慧楼宇和人们的生活息息相关,楼宇智能化程度的提高,会极大程度的改善人们的生活品质,在当前工业互联网大背景下受到很大关注。目前智慧楼宇可视化监控的主要优点包括:

    HT_hightopo
  • 基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控

    智慧楼宇和人们的生活息息相关,楼宇智能化程度的提高,会极大程度的改善人们的生活品质,在当前工业互联网大背景下受到很大关注。目前智慧楼宇可视化监控的主要优点包括:

    HT for Web
  • Applying Domain-Driven Design and Patterns(ADDDP) With examples in C# and .NET

    Applying Domain-Driven Design and Patterns(ADDDP) With examples in C# and .NET是在...

    张善友

扫码关注云+社区

领取腾讯云代金券