當包裝到位置時，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>