CSS-Übergang funktioniert nicht, wenn in Position gewickelt: fixed Element

Question

Ich habe eine Textarea, die ich auf den Vollbildmodus erweitern und einige Aspekte dieses Übergangs animieren möchte. Hier ist das Markup:

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

Die eigentliche Animation zu komplex ist, so das Problem demonstrieren ich als Beispiel nur nahm font-size.

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

Der Vollbild-Effekt wird von dieser Klasse nicht erreicht:

.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; 
} 

Vollbild-Funktion funktioniert gut, aber die Animation ohne ersichtlichen Grund funktioniert nicht.

Wenn ich das .wrapper Element entfernen oder den position: fixed Stil deaktivieren, beginnt die Animation magisch wieder zu arbeiten. Aber ich brauche beides, also kann ich sie nicht einfach loswerden. Warum beeinflusst entweder Animation ist über mich hinaus.

Vollarbeitsprobe: https://jsfiddle.net/bypvfveh/3/

Answer 1

Dies ist Chrome spezifisches Problem. Wenn Sie es in Firefox versuchen, werden Sie feststellen, dass es funktioniert. Für eine Erkundung sehen Sie diese Antwort https://stackoverflow.com/a/37953806 (und geben Sie ihm eine Aufzählung;)).

Schnelle und einfache Lösung für Ihren Fall ist es, Ihre Klassenwechsel in zwei Teile zu brechen.

1. Ändern Sie das Element aus relativ zum festen
2. aktualisieren die übrigen Eigenschaften wie Breite/Höhe/etc ...

Ich habe eine Version Ihrer Geige aktualisiert, dies zu zeigen. Ich habe Ihre Vollbildklasse in full-screen und fixed-position aufgeteilt. Außerdem habe ich eine 100ms Verzögerung auf die Änderung der Größeneigenschaften gesetzt, um diese Funktion von der Eigenschaftsänderung position zu trennen.

$("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>