当包装到位置时，CSS转换不起作用：固定元素

Question

我有一个textarea，我想要扩展为全屏并为该转换的某些方面设置动画。 这里的标记：

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

实际的动画是太复杂了，所以证明我只是把字体大小作为例子的问题。

.wrapper > textarea { 
    font-size: 1em; 
    transition: font-size 1s linear; 
} 

的全屏显示效果是通过这个类实现：

.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元素或禁用position: fixed样式，动画会神奇地开始再次运行。然而，我需要这些东西，所以我不能摆脱它们。为什么要么影响动画超出了我。

全部工作示例：https://jsfiddle.net/bypvfveh/3/

Answer 1

这是Chrome的特定问题。如果你在Firefox中试用它，你会发现它的工作原理。对于一个探索，看到这个答案https://stackoverflow.com/a/37953806（并给他一个upvote;））。

为您的案例提供快速简单的解决方案是将您的班级变更分为两部分。

1. 变化相对于固定
2. 更新一样宽/高/等的剩余财产元素...

我已经更新了一个版本的小提琴，显示这一点。我已将您的全屏课程分为full-screen和fixed-position。此外，我已经对改变尺寸属性进行了100ms的延迟，以便从position属性更改中分离出此功能。

$("textarea").on("dblclick", function() { 
 
    //get reference to the element as it will be overided in timeout function 
 
    var self = this; 
 
    
 
    //use timeout function so full screen class is added after fixed mode 
 
    setTimeout(function(){ 
 
     $(self.parentNode).toggleClass("full-screen"); 
 
    }, 100); 
 
    
 
    //make element fixed 
 
    $(this.parentNode).toggleClass("fixed-mode"); 
 
}); 
 

 
$(".full-screen-button").on("click", function() { 
 
    //get reference to the element as it will be overided in timeout function 
 
    var self = this; 
 
    
 
    //use timeout function so full screen class is added after fixed mode 
 
    setTimeout(function(){ 
 
     $(self.parentNode).toggleClass("full-screen"); 
 
    }, 100); 
 
    
 
    //make element fixed 
 
    $(this.parentNode).toggleClass("fixed-mode"); 
 
});

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.wrapper { 
 
\t /* wrapper is needed to trace textarea's size, to position the button */ 
 
    display: inline-block; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.wrapper > textarea { 
 
    font-size: 1em; 
 
    /* purposefully ugly animation to make a point */ 
 
    transition: font-size 1s linear; 
 
} 
 

 
.wrapper > .full-screen-button { 
 
    position: absolute; 
 
    bottom: 2px; 
 
    left: 2px; 
 
    cursor: pointer; 
 
} 
 

 
.fixed-mode { 
 
    position: fixed!important; 
 
    left: 0!important; 
 
    top: 0!important; 
 
} 
 

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <textarea>This is a sample text</textarea> 
 
    <div class="full-screen-button">x</div> 
 
</div>