标签: css-transitions

CSS3过渡,变换和动画都很精彩.现在更多的浏览器支持它们.

还有一件事我一直在问自己:为什么规范不确定CSS3过渡和动画应该处理高度:自动？

当我们使用CSS3灵活的盒子模型和媒体查询之类的东西摆脱固定布局时,它没有任何意义.

使用JavaScript只是为了设置具有固定高度的CSS转换没有任何意义.

现在我的问题是:

W3C是否会指定高度:自动应支持CSS3过渡和动画,还是我们可以请求它们指定这个？

在我的CSS中,我为一个类定义了一个过渡.出于某种原因,当我将鼠标悬停在具有转换的类上时,由于transition-duration某种原因会改变其他地方的字体颜色(表单占位符和某些链接).(就我所知,这只发生在Safari中.)

这是一个jsFiddle,显示我在说什么:

http://jsfiddle.net/EJUhd/

有谁知道为什么会这样,我怎么能阻止它？

在我的页面的一部分,我正在使用css3过渡来显示/隐藏一些具有良好滑动效果的div

.service_status {
        max-height: 0;
    -webkit-transition: max-height 1s ease-in-out;
    -moz-transition: max-height 1s ease-in-out;
    -ms-transition: max-height 1s ease-in-out;
    -o-transition: max-height 1s ease-in-out;
    transition: max-height 1s ease-in-out;
}

.service_status.open {
    max-height: 500px;
    -webkit-transition: max-height 1s ease-in-out;
    -moz-transition: max-height 1s ease-in-out;
    -ms-transition: max-height 1s ease-in-out;
    -o-transition: max-height 1s ease-in-out;
    transition: max-height 1s ease-in-out;
}

我想在一些表行上使用相同的技术,但max-height和height没有任何影响(由于我猜的表的CSS规范).有没有一种方法可以使用CSS3过渡而没有js显示/隐藏带有动画的表行？

我遇到了CSS转换问题.我正在CSS为我的投资组合设计一个画廊,我需要我的图像在悬停时淡入.我一直在玩这个超过一个小时,我希望有人能指出我正确的方向.

这是JSFiddle的简化版本

我在使用jQuery Mobile Application时遇到了一个大问题:我正在使用自定义函数(它们由onClick触发)来切换页面和currentPage.

它只发生在使用集成浏览器更改(由于ajax请求)的站点上的Android设备上.iOS和Chrome效果很好.

单击元素后,动画开始但在结束之前,它会切换回旧页面.半秒后,它切换回新的.

我在这里制作了一个错误的电影:http://www.youtube.com/watch？v = sXxvVUxniNg

非常感谢你

代码(CoffeeScript):

class Guide

    @categoriesLoaded = false

    @loadSearch: ->

        $.mobile.changePage $("#guide"),
            transition: 'slide'
            changeHash: false

        if !@categoriesLoaded

            @categoriesLoaded = true

            GuideApi.getCategories (data) ->
                output = Mustache.render $("#tmpl-guide-categories-select").html(), 
                    categories: data

                $("#guide-search-category").append output

                $("#guide-search-category").val($("#guide-search-category option:first").val());

window.WgSwitchGuide = ->
        Guide.loadSearch

我试图用css创建一个背景,其中一边是纯色,另一边是纹理:两个被对角线分开.我希望这是两个独立的div,因为我打算用jQuery添加一些动作,如果你点击右边,灰色三角形会变小,如果你点击左边,纹理三角形变小(就像一个幕布效果).任何建议将不胜感激.

我希望在圆圈内有一个方形图像.

当用户将鼠标悬停在图像上时,图像应缩放(放大).

圆圈应保持相同的大小.

仅在CSS过渡期间,方形图像与圆形重叠(好像溢出:隐藏不存在).

以下是Chrome和Safari中奇怪行为的演示:http: //codepen.io/jshawl/full/flbau

在Firefox中工作正常.

正如标题所暗示的那样,是否有正确的方法来设置一些初始CSS属性(或类)并告诉浏览器将这些转换为另一个值？

例如(小提琴):

var el = document.querySelector('div'),
    st = el.style;
st.opacity = 0;
st.transition = 'opacity 2s';
st.opacity = 1;

这不会为Chrome 29/Firefox 23中元素的不透明度设置动画.这是因为(来源):

[...]你会发现,如果你同时应用两组属性,那么浏览器会尝试优化属性更改,忽略初始属性并阻止转换.在幕后,浏览器在绘制之前批量处理属性更改,虽然通常会加快渲染速度,但有时会产生不利影响.

解决方案是在应用两组属性之间强制重绘.这样做的一个简单方法就是访问DOM元素的offsetHeight属性[...]

事实上,黑客确实可以在当前的Chrome/Firefox版本中运行.更新了代码(小提琴 - Run打开小提琴后点击再次运行动画):

var el = document.querySelector('div'),
    st = el.style;
st.opacity = 0;
el.offsetHeight; //force a redraw
st.transition = 'opacity 2s';
st.opacity = 1;

但是,这是相当hackish,并报告在某些Android设备上不起作用.

另一个答案建议使用,setTimeout以便浏览器有时间执行重绘,但它也失败了,因为我们不知道重绘需要多长时间.猜测一个相当大的毫秒数(30-100？)以确保重绘意味着牺牲性能,不必要地闲置,希望浏览器在那么短的时间内执行一些魔术.

通过测试,我发现了另一种解决方案,它在最新的Chrome上运行良好,使用requestAnimationFrame(小提琴):

var el = document.querySelector('div'),
    st = el.style;
st.opacity = 0;
requestAnimationFrame(function() {
    st.transition …

我有背面可见性的问题.它在Safari/Chrome中的运行方式非常有用,但由于某些原因它在Firefox中无法正常工作.

当盒子翻转时,我得到了正面的镜像.

尝试font-weight使用CSS优雅地从'400'过渡到'600',但它似乎不适用于Chrome.这是一个已知的错误还是我做错了什么？

在这里查看小提琴以获取示例