Question

我在使用属性显示的过渡效果时遇到了一个小问题：

我在Safari上测试：

input.input_field {
    display:none;
    transition-property: display;
    transition-duration: 2s;
    -webkit-transition-property: display; /* Safari */
    -webkit-transition-duration: 2s; /* Safari */
}
input.input_field_active {
    display:block;
}

但是这个例子现在还不起作用，任何人都知道为什么我不能使用该属性：display ??

问候！

Answer 1

您只能对可伸缩属性执行转换，即数值定义的属性（可能有也可能没有度量单位），该属性存在于任何两个点相关的范围内。这样做的原因是，为了执行转换，浏览器采用提供的起点和终点，然后推断临时关键帧 - 产生结果动画。

显示属性不可扩展，只是简单地打开了＆＃39;或者＆＃39; off＆＃39;实际上更具体地说，它具有许多与任何形式的规模无关的属性。因此，不能推断临时值。您也可以这样看待它，display也是一种布局，而不是视觉风格 - 尽管它确实具有视觉内涵。您只能对视觉样式执行转换。

根据您的要求，您可以opacity或height（或宽度）执行转换。

Demo Fiddle of alternate transitions

Answer 2

您可以使用visibility代替display和使用opacity作为淡入淡出效果。

visibility是可转换的，虽然它也只有开/关状态，但你可以使用转换延迟来影响它。

JSFiddle Demo

<强> HTML

<button>Hover</button>

<div class="wrap">


</div>

<强> CSS

.wrap {
    width:100px;
    height:100px;
    border:1px solid grey;
    background-color: #bada55;
    margin-top: 25px;
    visibility:hidden;
    opacity:0;
    transition: visibility 0s linear 0.5s,
                opacity 0.35s linear;
}

button:hover + .wrap {
  visibility:visible; /* show it on hover */
  opacity:1;
  transition-delay:0; 
}

CSS 3 - 获取属性转换：显示

2 个答案:

Demo Fiddle of alternate transitions