CSS转换在包装到position:fixed元素时不起作用

我有一个文本区域，我想将其扩展到全屏，并为过渡的某些方面设置动画。 以下是标记：

<div class="wrapper">
    <textarea>This is a sample text</textarea>
    <div class="full-screen-button">x</div>
</div>

全屏效果由该类实现：

.wrapper.full-screen,
.wrapper.full-screen > textarea {
    position: fixed!important;
    left: 0!important;
    top: 0!important;
    width: 100%!important;
    height: 100%!important;
    margin: 0!important;
    border: 0!important;
    resize: none!important;
    outline: none!important;
    font-size: 3em;
}

全屏功能工作正常，但动画无法正常工作，原因不明

如果我删除

.wrapper

元素或禁用

位置：fixed

样式，动画将神奇地再次开始工作。但是我需要这两样东西，所以我不能把它们都扔掉。我无法理解为什么两者都会影响动画

---

完整工作示例：

这是特定于Chrome的问题。如果你在Firefox中尝试，你会发现它是有效的。有关解释，请参见此答案（并向他投赞成票）

对于您的案例，快速简单的解决方案是将类更改分为两部分

将图元从“相对”更改为“固定”

更新剩余属性，如宽度/高度/等

我已经更新了你的小提琴版本来展示这一点。我已经把你的全屏课程分为

全屏

和

固定位置

。此外，我在更改大小属性时设置了100毫秒的延迟，以将此函数与

位置

属性更改分开

$（“textarea”）。在（“dblclick”，function（）上{
//获取对元素的引用，因为它将在超时函数中被覆盖
var self=这个；
//使用超时功能，以便在固定模式后添加全屏类
setTimeout（函数（）{
$（self.parentNode）.toggleClass（“全屏”）；
}, 100);
//使元素固定
$（this.parentNode）.toggleClass（“固定模式”）；
});
$（“.full screen button”）。在（“单击”，函数（）{
//获取对元素的引用，因为它将在超时函数中被覆盖
var self=这个；
//使用超时功能，以便在固定模式后添加全屏类
setTimeout（函数（）{
$（self.parentNode）.toggleClass（“全屏”）；
}, 100);
//使元素固定
$（this.parentNode）.toggleClass（“固定模式”）；
});
正文{
填充：0；
保证金：0；
}
.包装纸{
/*需要包装器来跟踪textarea的大小，以定位按钮*/
显示：内联块；
位置：相对位置；
排名：0；
左：0；
}
.wrapper>textarea{
字号：1em；
/*故意制作丑陋的动画来表达观点*/
过渡：字体大小1s线性；
}
.wrapper>全屏按钮{
位置：绝对位置；
底部：2px；
左：2px；
光标：指针；
}
.固定模式{
位置：固定！重要；
左：0！重要；
顶部：0！重要；
}
.wrapper.全屏，
.wrapper.full-screen>textarea{
宽度：100%！重要；
身高：100%！重要；
边距：0！重要；
边界：0！重要；
调整大小：无！重要；
大纲：无！重要；
字号：3em；
}

这是一个示例文本
x

.wrapper.full-screen,
.wrapper.full-screen > textarea {
    position: fixed!important;
    left: 0!important;
    top: 0!important;
    width: 100%!important;
    height: 100%!important;
    margin: 0!important;
    border: 0!important;
    resize: none!important;
    outline: none!important;
    font-size: 3em;
}