Question

我有一个textarea，我想扩展到全屏并动画转换的某些方面。这是标记：

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

实际的动画太复杂了，所以为了演示这个问题，我把font-size作为一个例子。

.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;））。

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

将元素从相对更改为固定
更新其余属性，例如width / height / etc ......

我已经更新了你的小提琴的一个版本来展示这个。我已将您的全屏课程分为<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='parent'> <div class='a'>a</div> <div class='a'>b</div> <div class='a'>c</div> <div class='a'>d</div> <div class='a'>e</div> </div>和full-screen。此外，我在更改大小属性时延迟了100毫秒，以便从fixed-position属性更改中分离此函数。

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 {
	/* 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;
}

包裹到position：fixed元素时，CSS转换不起作用

1 个答案: