Question

我有一个响应的rectagnle div，其内部有一个div，其initail属性为位置，绝对和顶部0f 100％，

当悬停时我希望内部div从顶部100％变为顶部0px，并且我正在进行过渡（注意tranistion: top 2s）

由于某种原因，这段代码在chrome上工作得很好，但是对于IE的转换不顺利，div会立即获得0px的顶部并且没有动画效果。

IE有一些问题将顶部位置设为0？

<div class="col-xs-6 col-md-4 pull-right" data-projects-dir53="1" style="display: block;">            
            <div class="projectBox" style="background-image:url('/Warehouse/content/pics/pic_250_A.jpg');">
                <div data-toggle="ajaxModal" data-target="#myModal" onclick="LoadProjectData(250);">
                    <div class="s-vert-parent text-center">
                        <div class="child-vert box-text-contain">
                            <h3>שתי דקות</h3>
                            <p class="hidden-xs"></p>
                            <a class="open-plus-icon" data-toggle="ajaxModal" data-target="#myModal" onclick="LoadProjectData(250);"><img alt="פלוס" src="../../../000Frames/site/images/plus_icon.png"></a>
                        </div>   
                    </div>         
                </div>
            </div>
        </div>

css代码：

.projectBox > div {
display:block; 
position:absolute;
top:100%; 
right:0px;
left:0px;
padding-bottom:67%; 
-webkit-transition: top 1s; 
transition: top 1s; 
color:White; 
width:100%; 
height:100%; 
background-color:RGBA(239,65,61,0.9); 
}
.projectBox:hover > div , .projectBox:focus > div { top:0px; right:0px; left:0px; bottom:0px; }

IE动画顶不起作用

0 个答案: