账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    用vue写的带动画效果的留言板,但点击后总是最后一条留言带动画,而不是最新的一条。
    37
    0

    我想实现的效果是点击发表后,最新的留言在最上面显示并且带动画效果(透明度从0到1,高度由0到30px)。为了让留言在最上面显示,我是用的this.list.unshift(this.msg)而不push,但却发现,即使最新留言在最上面显示了,动画效果却每次都是在最下面的那条微博上发生。请问如何实现每次都是让最上方的最新留言有动画效果?谢谢!

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <style>
    *{margin: 0;padding: 0;}
    body{background-color: #fff;font-size: 13px;color: #333;font-family: "微软雅黑";}
    ul{list-style: none;}
    
    
    #main{
    width: 480px;
    /*height:270px;*/
    padding:10px;
    border:1px solid #ccc;
    margin:50px auto;
    }
    #main textarea{
        width:100%;
        height:150px;
        box-sizing:border-box;
        display:block;
    }
    #main input[type=submit]{margin-top:5px;}
    #main ul{margin:0 auto;width: 400px;}
    #main ul li{
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #ebebeb;
        color:red;
        position: relative;
    }
    .v-enter,.v-leave-to{height:0;opacity:0;}
    .v-enter-active,.v-leave-active{
        transition:all 2s ease;
    }
    </style>
    </head>
    <body>
    <div id="main">
        发表评论:<br>
        <textarea v-model="msg"></textarea>
        <input type="submit" value="发表" @click="add">
        <ul>
            <transition-group>
                <li v-for="(item,index) in list" :key="index">{{item}}</li>
            </transition>
        </ul>
    </div>
    </body>
    <script>
    var vm = new Vue({
        el:"#main",
        data:{
            msg:"",
            list:[]
        },
        methods:{
            add:function (){
                this.list.unshift(this.msg);
                this.msg = '';
            }
        }
    });
    </script> 
    </html>
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    更多回答
    扫一扫访问手机版

    回答动态

    师傅被妖怪抓走了:发布了悬赏问题火爆全网的“元宇宙”到底是什么?预计能赚取 1积分收益
    酒后略带风情:发布了悬赏问题Android内存中Graphics与Code占用过高预计能赚取 10积分收益
    扛起拖把扫天下:发布了悬赏问题typescript如何导出接口配置?求解,谢谢!预计能赚取 10积分收益
    发布了悬赏问题Vue 如何改变返回页面的路径?如让B页面只能返回到A页面.预计能赚取 11积分收益
    发布了悬赏问题vue H5移动端;底部bottom固定定位,安卓弹起键盘导致页面变形如何解决?预计能赚取 10积分收益
    发布了悬赏问题请问为什么tomcat8.5 GET请求中文正常,POST请求还需要设置UTF-8.预计能赚取 10积分收益
    发布了悬赏问题vue2.5+ts创建以及引入jq的方法预计能赚取 11积分收益
    情场浪女:发布了悬赏问题import ggplot时报错module 'pandas' has no attribute 'tslib'预计能赚取 10积分收益
    见心书画许老师18753375161:发布了悬赏问题echarts3 legend禁止点击事件,允许悬浮事件预计能赚取 11积分收益
    aa_92cb0bd09f:发布了悬赏问题codewar上的一个问题预计能赚取 11积分收益