特效组件流程分析

colezhou

发布于 2019-11-24 17:34:14

9030

发布于 2019-11-24 17:34:14

特效组件流程分析

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

如果要灵活定制多个帧以及循环，用 animation.
如果要简单的from to 效果，用 transition.
如果要使用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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019-08-06日，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度