小编Tro*_*sic的帖子

所以我有一些div应用了各种效果的原生元素(border-radius,box-shadow和transform: scale()).当我为它们制作动画时,会发生两件奇怪的事情:

1. 即使我没有尝试为比例设置动画,如果我没有将比例放在动画中,它也会被忽略.
2. 当我将比例放在动画中时,Webkit模糊了元素

请参阅此处的示例:http://jsfiddle.net/trolleymusic/RHeCL/ - 底部的按钮将触发问题.

第一个问题也发生在Firefox中,所以我猜这是因为这是动画规范应该如何工作的.不是我想要的,但好吧,我会忍受它.

第二个问题很奇怪.我知道它与3d变换有关,因为如果我(仅用于测试目的)声明-webkit-perspective或-webkit-transform-style: preserve-3d;在圆形元素上,它也会导致模糊问题.我的困惑在于,我并没有尝试将z索引转换为全部,我也尝试使用纯粹的动画translateY代替translate.

它发生在Chrome(18),Chrome Canary(20)和Safari(5.1.2和5.1.4)中.

那么,我认为我的想法是正确的吗？我怎样才能避免模糊？

最坏的情况:我可以使用不同大小的元素而不是缩放它们,这不是真正的问题 - 但我认为这将是一个更优雅的解决方案,现在这个问题已经出现了.

我真的很困惑.

我的理解是,array.splice(startIndex, deleteLength, insertThing)将插入insertThing到的结果splice()在startIndex和删除deleteLength值得条目？......所以:

var a = [1,2,3,4,5];
var b = a.splice(1, 0, 'foo');
console.log(b);

应该给我:

[1,'foo',2,3,4,5]

和

console.log([1,2,3,4,5].splice(2, 0, 'foo'));

应该给我

[1,2,'foo',3,4,5]

等等

但由于某种原因,它给了我一个空阵列？看看:http://jsfiddle.net/trolleymusic/STmbp/3/

谢谢 :)

所以 - 我认为这是一个浏览器错误.它来自一个更复杂的设计/网站,但我有一个很好的固定小提琴,简化我的代码和设计等,并找到了以下内容:

<video>在Chrome中嵌入没有控件属性时,触发视频以使用javascript播放会导致视频元素变为空白.

http://jsfiddle.net/trolleymusic/2fHTv/

空白有点随机,有时通过滚出元素,它会再次出现.有时您需要点击/专注于其他内容,大多数时候暂停视频会使其重新出现.

我还在其中放了一条(注释掉的)线,表明它不仅仅基于点击,而是在play()通过调用时发生setTimeout.

无论如何,玩一玩,告诉我你的想法.

谢谢!

韦恩

(噢 - 另一个视频是为了表明另一个与controls属性相同的元素工作正常

我正在尝试使用变量作为名称来调用mixin,如下所示:

@include $mixin-name;

这似乎并不那么困难......

我见过有几个人想提到这个.这张票(http://dev.vaadin.com/ticket/9546)说"固定",我认为这意味着在Sass 3.2中这是可能的,但是来自Google网上论坛上Sass小组的评论似乎暗示:http ://goo.gl/HtdHu

我看到他们在说什么,似乎很多人在询问它可以很容易地以另一种方式解决他们的问题.

我想不出我的问题的另一种方式,所以让我解释一下,也许有人可能会有一两个想法？

CSS动画

我已经创建了一个mixin,@keyframes以便我可以调用@include animation();并获取前缀和官方的完整列表@keyframes

@include keyframes(reveal) {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

给我:

@-webkit-keyframes reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-moz-keyframes reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-ms-keyframes reveal {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-o-keyframes reveal { …

我正在尝试使用CSS3过渡来转换比例和不透明度 - 我无法解决如何在不使用所有内容的情况下转换多个内容

transition-function: all;
transition-duration: 1s;
transition-timing-function: ease-in;

工作,如:

transition: all 1s ease-in;

和

transition-function: opacity;

要么

transition-function: scale;

但不是

transition-function: scale, opacity;

请参阅此处的示例:http://jsfiddle.net/5PCGs/7/

任何帮助将非常感激!谢谢 :) !

编辑:

我已经解决了这个问题transition-property(感谢Simone),但现在它只是在Firefox中激活不透明,而不是两者兼而有之 - http://jsfiddle.net/5PCGs/9 - 在FF和Chrome中并排比较