29

正如标题所暗示的那样，是否有适当的方法来设置一些初始 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属性 [...]

事实上，该 hack 确实适用于当前的 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;

但是，这是相当骇人听闻的，并且据报道不适用于某些 android 设备。

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

通过测试，我发现了另一种在最新 Chrome 上运行良好的解决方案，使用requestAnimationFrame（小提琴）：

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

我假设requestAnimationFrame在执行回调之前等到下一次重绘开始之前，因此浏览器不会批量处理属性更改。这里不完全确定，但在 Chrome 29 上运行良好。

更新：经过进一步测试，该requestAnimationFrame方法在 Firefox 23 上效果不佳 - 大多数情况下似乎都失败了。（小提琴）

是否有适当或推荐的（跨浏览器）方法来实现这一目标？

4

5 回答 5

15

目前还没有一种干净的方法（不使用 CSS 动画——请参阅James Dinsdale 的附近答案，以获取使用 CSS 动画的示例）。有一个规范错误 14617，不幸的是，自 2011 年提交以来没有采取行动。

setTimeout在 Firefox 中不能可靠地工作（这是设计使然）。

我不确定requestAnimationFrame——对原始问题的编辑说它也不能可靠地工作，但我没有调查。（更新：看起来requestAnimationFrame 至少有一位 Firefox 核心开发人员认为是您可以进行更多更改的地方，不一定看到以前更改的效果。）

强制回流（例如通过访问offsetHeight）是一种可能的解决方案，但要使转换工作，它应该足以强制重新样式（即getComputedStyle）：https ://timtaubert.de/blog/2012/09/css-transitions-for-dynamically-创建的dom元素/

window.getComputedStyle(elem).opacity;

请注意，仅运行getComputedStyle(elem)是不够的，因为它是惰性计算的。我相信您从 getComputedStyle 询问哪个属性并不重要，重新样式仍然会发生。请注意，要求与几何相关的属性可能会导致更昂贵的回流。

有关回流/重新样式/重新绘制的更多信息：http ://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

于 2015-08-06T17:25:43.677 回答
9

自 2013 年以来情况发生了变化，所以这里有一个新的答案：

您可以使用Web Animations。它们在 Chrome 36 和 Firefox 40 中本地实现，并且有一个适用于所有其他浏览器的 polyfill。

示例代码：

var player = snowFlake.animate([
  {transform: 'translate(' + snowLeft + 'px, -100%)'},
  {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], 1500);

// less than 1500ms later...changed my mind
player.cancel();
于 2015-10-22T13:46:48.933 回答
3

You shouldn't need too much JavaScript to achieve what you want, just use CSS keyframes and animations for the same effect.

div {
    opacity: 0;
}

div.fadeIn {
    -webkit-animation: fadeIn 2s forwards;
    animation: fadeIn 2s forwards;
}

@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

As shown in this JsFiddle it works either from page load (with class already added) or when dynamically adding the class to trigger the animation.

于 2014-01-22T12:52:31.307 回答
0 

  1.   <script  src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
   <script>

     $(document).ready(function(){
$('a.hiw*').click(function(){	
	
	id = this.id;
	dval = $('#'+id).attr('data-value');
	if (dval == 0) {
		$('a.hiw*').attr('data-value','0');
		$( ".hiw-popup" ).remove();
		$('#'+id).attr('data-value','1');
		$('<div class="hiw-popup white-well run-animation hidden-xs"><div class="row text-center"><div class="col-sm-2 animation-hiw col-xs-2"><span class="glyphicon glyphicon-pencil hiw-icon1" style="background:#ffffff;">1</span><br/>block1</div><div class="col-sm-2 animation-hiw col-xs-2"><span class="glyphicon glyphicon-shopping-cart hiw-icon2">2</span><br/>BLOCK3</div><div class="col-sm-3 animation-hiw col-xs-3"><span class="glyphicon glyphicon-folder-open hiw-icon3">3</span><br/>BLOCK2</div><div class="col-sm-3 animation-hiw col-xs-3"><span class="glyphicon glyphicon-ok hiw-icon4">4</span><br/>BLOCK</div><div class="col-sm-2 animation-hiw col-xs-2"><span class="glyphicon glyphicon-arrow-down hiw-icon5">5</span><br/>BLOCK</div></div></div>').insertAfter('#'+id);
	}else{
		$('#'+id).attr('data-value','0');
		$( ".hiw-popup" ).remove();
	}	
});
});
var ahiw = function(id){	
	dval = $('#'+id).attr('data-value');
	if (dval == 0) {
		$('a.hiw*').attr('data-value','0');
		$( ".hiw-popup" ).remove();
		$('#'+id).attr('data-value','1');
		$('<div class="hiw-popup white-well run-animation hidden-xs"><div class="row text-center"><div class="col-sm-2 animation-hiw col-xs-2"><span class="glyphicon glyphicon-pencil hiw-icon1" style="background:#ffffff;">1</span><br/>block1</div><div class="col-sm-2 animation-hiw col-xs-2"><span class="glyphicon glyphicon-shopping-cart hiw-icon2">2</span><br/>BLOCK3</div><div class="col-sm-3 animation-hiw col-xs-3"><span class="glyphicon glyphicon-folder-open hiw-icon3">3</span><br/>BLOCK2</div><div class="col-sm-3 animation-hiw col-xs-3"><span class="glyphicon glyphicon-ok hiw-icon4">4</span><br/>BLOCK</div><div class="col-sm-2 animation-hiw col-xs-2"><span class="glyphicon glyphicon-arrow-down hiw-icon5">5</span><br/>BLOCK</div></div></div>').insertAfter('#'+id);
	}else{
		$('#'+id).attr('data-value','0');
		$( ".hiw-popup" ).remove();
	}
}
   
</script>
    /* Chrome, Safari, Opera */
@-webkit-keyframes animation-hiw-icon {
  from {
    background-color: #d9d9d9;
  }
  to {
    background-color: #4ad18f;
  }
}
/* Standard syntax */
@keyframes animation-hiw-icon {
  from {
    background-color: #d9d9d9;
  }
  to {
    background-color: #4ad18f;
  }
}


/* Chrome, Safari, Opera */
@-webkit-keyframes animation-hiw-prog {
  from {
   background-color: #d9d9d9;
    width: 0%
  }
  to {
    width: 100%;
	 background-color: #4ad18f;
  }
}
/* Standard syntax */
@keyframes animation-hiw-prog {
  from {
    width: 0%
  }
  to {
    width: 100%;
  }
}
/* Chrome, Safari, Opera */
@-webkit-keyframes animation-hiw-pop {
  from {
    opacity: 0.5;
	background-color: #d9d9d9;
    -ms-transform: scale(0.8); /* IE 9 */
    -webkit-transform: scale(0.8); /* Chrome, Safari, Opera */
    transform: scale(0.8);
  }
  to {
   background-color: #4ad18f;
    opacity: 1;
    font-weight: normal;
    -ms-transform: scale(.8); /* IE 9 */
    -webkit-transform: scale(.8); /* Chrome, Safari, Opera */
    transform: scale(.8);
  }
}
/* Standard syntax */
@keyframes animation-hiw-pop {
  from {
  background-color: #d9d9d9;
    opacity: 0.5;
    -ms-transform: scale(0.8); /* IE 9 */
    -webkit-transform: scale(0.8); /* Chrome, Safari, Opera */
    transform: scale(0.8);
  }
  to {
  background-color: #4ad18f;
    opacity: 1;
    font-weight: normal;
    -ms-transform: scale(.8); /* IE 9 */
    -webkit-transform: scale(.8); /* Chrome, Safari, Opera */
    transform: scale(.8);
  }
}
/*Animation Trigger*/
.run-animation .hiw-progress:after, .run-animation .animation-hiw, .run-animation .hiw-icon1, .run-animation .hiw-icon2, .run-animation .hiw-icon3, .run-animation .hiw-icon4, .run-animation .hiw-icon5 {
  -webkit-animation-play-state: running; /* Safari and Chrome */ 
  animation-play-state: running;
}


.run-animation .hiw-progress:after, .run-animation .animation-hiw, .run-animation .hiw-icon1, .run-animation .hiw-icon2, .run-animation .hiw-icon3, .run-animation .hiw-icon4, .run-animation .hiw-icon5 {
  -webkit-animation-play-state: running;
  animation-play-state: running;
}
.hiw-progress:after {
  content: "";
  width: 0%;
  height: 5px;
  background: #4ad18f;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: animation-hiw-prog 5s linear forwards;
  animation: animation-hiw-prog 5s linear forwards;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.white-well {
  background-color: #fff;
  padding: 10px 15px;  border-radius: 5px;
  border: 1px solid #f1f1f1;
}
.hiw-popup {
  position: absolute;
   width: 100%;
  z-index: 9;
  margin: 30px 0 0 -15px;
  padding: 0px 15px !important;
  border-color: rgba(0, 0, 0, 0.25) !important;
  box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.60);
  -webkit-box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.60);
  -mz-box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.60);
}
.hiw-popup .arrow {
  position: absolute;
  display: block;
  width: 0;
  height: 0;  border-color: transparent;
  border-style: solid;
  border-width: 11px;
  left:90%;
  margin-left: -11px;
  border-top-width: 0;
  border-bottom-color: rgba(0, 0, 0, 0.25);
  top: -11px;
}
.hiw-popup .glyphicon {
  margin-bottom: 10px;
  margin-right: 0px !important;font-weight:bold;
  background-color: #ffffff;color:#222222 !important;
}
.white-well .glyphicon {
   background-color: #ffffff!important;
  border-radius: 76px;margin-top: -3px;color:#d9d9d9 !important;
  padding: 5px 9px 8px;
  color: #fff;
  box-shadow: 0px 0px 3px #222222;
  border: 3px solid #ffffff;
}
.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.clearfix:before, .clearfix:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .modal-footer:before, .modal-footer:after, .review:before, .review:after, .panel-body:before, .panel-body:after {
  content: " ";
  display: table;
}
.animation-hiw:nth-child(1) {
  -webkit-animation-delay: .2s;
  animation-delay: .2s;
}

.hiw-icon5 {
  -webkit-animation: animation-hiw-icon 0.2s forwards;
  animation: animation-hiw-icon 0.2s forwards;
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.hiw-icon4 {
  -webkit-animation: animation-hiw-icon 0.2s forwards;
  animation: animation-hiw-icon 0.2s forwards;
  -webkit-animation-delay: 3.75s;
  animation-delay: 3.75s;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.hiw-icon3 {
  -webkit-animation: animation-hiw-icon 0.2s forwards;
  animation: animation-hiw-icon 0.2s forwards;
  -webkit-animation-delay: 2.25s;
  animation-delay: 2.25s;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.hiw-icon2 {
  -webkit-animation: animation-hiw-icon 0.2s forwards;
  animation: animation-hiw-icon 0.2s forwards;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.hiw-icon1 {
  -webkit-animation: animation-hiw-icon 0.2s forwards;
  animation: animation-hiw-icon 0.2s forwards;
  -webkit-animation-delay: .2s;
  animation-delay: .2s;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

.animation-hiw {
  -webkit-animation: animation-hiw-pop 0.2s forwards; /* Chrome, Safari, Opera */
  animation: animation-hiw-pop 0.2s forwards;
  -webkit-animation-play-state: paused; /* Safari and Chrome */
  animation-play-state: paused;
  opacity: 0.5;
  -ms-transform: scale(0.8); /* IE 9 */
  -webkit-transform: scale(0.8); /* Chrome, Safari, Opera */
  transform: scale(0.8);
    background: #d9d9d9;
   width: 15%;
  padding: 2% 1%;
  height: 140px;
  color: #ffffff;  float: left;
}
.animation-hiw:nth-child(1){ -webkit-animation-delay: .2s; animation-delay: .2s; }
.animation-hiw:nth-child(2){ -webkit-animation-delay: 1s; animation-delay: 1s; }
.animation-hiw:nth-child(3){ -webkit-animation-delay: 2.25s; animation-delay: 2.25s; }
.animation-hiw:nth-child(4){ -webkit-animation-delay: 3.75s; animation-delay: 3.75s; }
.animation-hiw:nth-child(5){ -webkit-animation-delay: 5s; animation-delay: 5s; }

hiw {
  visibility: hidden;
  font-size: 12px;
  font-style: italic;
  text-align: right;
  float: right;
}
    <body>
<a href="javascript:void(0);" class="hiw hidden-xs" id="hiw_1" data-value="1" style="float:LEFT;margin-right:10px;color: #4ad18f;font-size: 12px;padding:0px 0px 5px 0px;">How it works</a>
</body>

    #

于 2015-06-04T06:41:25.467 回答
-1

这是一个工作版本。自己看吧。

在 Chrome、Firefox、Opera 上测试。

在我的 firefox 版本上，它不支持 style.transition，因此如果标准名称不可用，我将其退回到供应商特定名称。

http://jsfiddle.net/eNCBz/5/

var el = document.querySelector('div');

var VENDORS = ['Moz', 'Webkit', 'Ms', 'O'];

function getVendorSpecificName(el, prop) {
    var style = el.style;
    if (prop in style) {
        return prop;
    }
    prop = ucfirst(prop);
    for (var i = 0, l = VENDORS.length, name; i < l; i++) {
        name = VENDORS[i] + prop;
        if (name in style) {
            return name;
        }
    }
    return null;
}

function ucfirst(str) {
    return str && str.charAt(0).toUpperCase() + str.substring(1);
}

function toCamelCase(str) {
    return str.split('-').map(function (str, i) {
        return i > 0 ? ucfirst(str) : str;
    }).join('');
}

function animateCss(el, prop, from, to, duration) {
    var style = el.style,
        camel = toCamelCase(prop),
        vendorSpecific = getVendorSpecificName(el, camel);
    if (!vendorSpecific) {
        console.log(prop + ' is not supported by this browser');
        return false;
    }

    var transitionPropName = getVendorSpecificName(el, 'transition');
    if (!(transitionPropName in style)) {
        console.log('transition is not supported by this browser');
        return false;
    }

    style[vendorSpecific] = from;

    setTimeout(function () {
        style[transitionPropName] = prop + ' ' + duration + 's ease';
        setTimeout(function () {
            style[vendorSpecific] = to;
        }, 1);
    }, 1);
    return true;
}

animateCss(el, 'opacity', 0, 1, 2);

让我解释一下发生了什么：

  • 制作了一些辅助函数，如 ucfirst、toCamelCase

    • style 属性使用驼峰式命名

  • 如果标准名称不可用，请尝试查找供应商特定的样式属性名称

  • 利用 setTimeout 函数确保浏览器重绘

    • 据我所知，所有浏览器总是在超时重绘

我试图使它更通用的功能，以便其他属性也可以应用，例如颜色或背景。

希望这可以帮助！

于 2013-09-02T09:07:22.063 回答