标签: css-transitions

我需要在允许函数再次重复之前检测CSS转换是否已完成,以防止搞乱边距.

那么我有多喜欢的东西

if (transitionend == true) {
  // do stuff
} else {
  // do nothing
}

CSS转换和转换之间的主要区别是什么？

这两者都用于改变对象的当前形状/状态.(你可以用JS等做漂亮的动画..)

但是我仍然不清楚哪一个用于何处以及用于什么.

我不确定这是否可行,但我认为使用CSS变换来创建一个效果,其中div从其中心扩展到预定的高度和宽度,而不是仅从左上角开始.

例如,如果我有(演示)

<div id="square"></div>

和(供应商前缀为了简洁而遗漏)

#square {
    width: 10px;
    height: 10px;
    background: blue;
    transition: width 1s, height 1s;
}
#square:hover {
    width: 100px;
    height: 100px;
}

在悬停时,这会将方块向右扩展到100px.我想从中间扩展它.

我知道我可能会使用transform: scale(x)(演示),但这并没有真正为我提供一个非常"像素完美"的布局(因为它是基于百分比的),它也不会影响周围的布局(使其他文档流中的元素调整为其大小调整).这基本上是我想要做的,除非文档流相应地受到影响.

有没有人知道没有javascript的方法吗？

我如何制作它以便CSS转换在媒体查询或其他任何情况下都不起作用？例如:

@media (min-width: 200px) {
    element {
        transition: width 1s;
    }   
}

@media (min-width: 600px) {
    element {
        transition: none; // SET TO NO TRANSITION
    }   
}

所有,

我希望能够使用translateX它的父元素(即,从左边缘到右边缘)100%的方式为子元素设置动画.

挑战在于百分比是translateX指元素本身,而不是父母.

所以,例如,如果我的html看起来像这样:

<div id="parent">
    <div id="child">
</div>

我的CSS就像这样(省略了供应商前缀):

#parent {
    position: relative;
    width: 300px;
    height: 100px;
    background-color: black;
}
#child {
    position: absolute;
    width: 20px;
    height: 100px;
    background-color:red;
    transform: translateX(100%);
}

这不起作用 - 孩子只移动20px(自身的100%),而不是整个父移动.(你可以在jsfiddle上看到这个):

我可以做这个:

#child {
    position: absolute;
    width: 20px;
    height: 100px;
    background-color:red;
    -webkit-transform: translateX(300px) translateX(-100%);
    transform: translateX(300px) translateX(-100%);
}

这工作(在jsfiddle上再次看到 ),因为它首先移动子300px(父的全宽),减去20px(子的宽度).然而,这取决于具有固定的已知像素尺寸的父母.

但是,在我的响应式设计中 - 我不知道父级的宽度,它会改变.

我知道我可以使用left:0和right:0,但是左/右的动画性能比translateX差很多(感谢Paul Irish!).

有没有办法做到这一点？

提前致谢.

我想知道是否有人知道webkit何时支持渐变的转换？
例如,以下代码在Chrome 6中不起作用(假设渐变过渡是一个链接):

.grad-transition {
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(white), to(black));
     -webkit-transition: background-image .5s;
}
.grad-transition:hover {
     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(white));
}

我想使用CSS3颜色过渡将高亮淡化效果(黄色到透明)应用于使用JQuery附加到标记的新元素.

CSS

#content div {
    background-color:transparent;
    -moz-transition:background-color 2s;
    -webkit-transition:background-color 2s;
    -o-transition:background-color 2s;
    transition:background-color 2s;
}

#content div.new {
    background-color:yellow;
}

HTML

<div id="content"></div>
<a id="add-element" href="#">add new element</a>

JS

$('#add-element').click(function() {
    var newElement = $('<div class="new">new element</div>');
    $('#content').append(newElement);
    newElement.removeClass('new');
});

单击链接时,将创建新元素.它的类是"新"(背景颜色为黄色),它附加到HTML标记.我应该能够立即删除"新"类以触发背景颜色过渡到透明(或任何其他颜色).我显然做错了,因为新元素的背景颜色立即显示为透明,没有过渡效果.我知道我可以在JQuery UI中执行此操作,但我想使用CSS3过渡.

jsfiddle在这里:

http://jsfiddle.net/paulaner/fvv5q/

是否可以为CSS伪类设置动画？

说我有:

#foo:after {
    content: '';
    width: 200px;
    height: 200px;
    background: red;
    display: block;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}

#foo:hover:after {
    width: 250px;
    height: 250px;
}

这甚至可能吗？我一直在测试,到目前为止我似乎无法找到解决方案.我正在尝试使用Modernizr减少我需要的JavaScript支持量.

我已经有了一个JavaScript方法,所以请不要选择JavaScript.

演示:http://jsfiddle.net/MxTvw/

似乎无法使用-webkit-transition为伪元素设置动画.下面的小提示显示我在Chrome/Safari中运行时的意思,我想现在不支持这个？

http://jsfiddle.net/4rnsx/130/

如何使用javascript检测浏览器是否支持css转换(并且不使用modernizr)？