在 css 中使用 `rotate()` 使聊天消息在聊天应用程序中向上增长？答案

【问题标题】：Using `rotate()` in css to make chat messages grow upwards in a chat app?在 css 中使用 `rotate()` 使聊天消息在聊天应用程序中向上增长？
【发布时间】：2018-05-24 23:35:30
【问题描述】：

我正在构建一个聊天应用程序，我希望新消息出现在最底部，而旧消息应该出现在新消息的顶部。我是 CSS 新手，所以我在 Internet 上找到了这个 example，它使用 transform 和 direction CSS 属性，方法是向右旋转 chatArea 容器，同时向左旋转消息。

虽然这行得通，但这对我来说似乎有点矫枉过正，而且很难维护，因为这些元素的方向现在是“颠倒的”。例如，因为chatArea div 现在被旋转以设置border-top CSS 属性，我实际上需要设置border-bottom 属性。

所以我想知道是否有更简单的解决方案。现在，我目前正在使用jQuery 将新消息添加到旧消息之前，并且我尝试了很多与prepend/append/prependTo 的组合，这是唯一有效的组合，但我不确定哪种组合更简单CSS 会起作用。

这是jQuery 代码做前置：

let $messages = jQuery('.messages');
    let $message = jQuery('<li class="list-group-item"></li>');
    $message.append('<p><strong>' + message.name + ' ' + tm + '</strong></p>');
    $message.append('<p>' + message.text + '</p>');
    $message.hide().fadeIn(FADE_TIME);
    $message.prependTo($messages);

这是html：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Socket.IO</title>
        <link rel="stylesheet" href="./css/bootstrap4.1.min.css">
        <link rel="stylesheet" href="./css/styles.css">
    </head>
    <body>
        <div class="container">
            <div id="conversation" class="row">
                <div class="col-md-6 offset-md-3 card">
                    <a href="./index.html">Change Settings</a>
                    <h1 class="room-title text-center"></h1>
                        <div class="chatArea">
                            <ul class="messages list-group">
                                <!-- Messages end up here! -->
                            </ul>
                        </div>
                    <form id="message-form">
                        <div class="form-group">
                            <input type="text" name="message" class="form-control"/>
                        </div>
                        <div class="form-group">
                            <input type="submit" class="btn btn-primary"/>
                            <button type="button" id="showUsersButton" class="btn btn-info">Show room users</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/socket.io-1.3.7.js"></script>
        <script type="module" src="js/app.js"></script>
        <script src="js/moment-2.22.1.js"></script>
        <script type="module" src="js/queryParams.js"></script>
    </body>
</html>

这是实现旋转的CSS：

.messages p {
    height: 100%;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    direction: ltr;
}

.chatArea {
    height: 500px;
    overflow-y: scroll;
    padding-bottom: 60px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    direction: rtl;
    border-bottom: 1px solid #ccc;
}

【问题讨论】：

向上成长是什么意思？如果你在最后添加新文本时遇到问题，一个简单的 append() 应该可以工作
@user1435897 我的意思是新消息应该低于旧消息

标签： javascript jquery css css-transforms

【解决方案1】：

Flexbox 可以做到这一点...不需要 javascript 或转换。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

.container {
  width: 80%;
  margin: 1em auto;
  border: 1px solid grey;
  /* magic */
  display: flex;
  flex-direction: column-reverse;
}

p {
  background: lightblue;
  margin-top: 1em;
}

<div class="container">
  <p class="message">Message6</p>
  <p class="message">Message5</p>
  <p class="message">Message4</p>
  <p class="message">Message3</p>
  <p class="message">Message2</p>
  <p class="message">Message1</p>
</div>

【讨论】：

这是我的第一直觉，您可能不需要颠倒顺序（我假设新消息将附加到底部）。但我认为 OP 正在寻找的是滚动位置。应该是锁在底部的，这个只能用js来实现
我认为更新的响应会在顶部，但我认为基本逻辑是合理的。