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