用vue实现一个动画效果

最近在用vue做项目时遇到了一个问题,想用vue的动画效果替代原先用jquery写的演示效果,动画的演示效果如下:
图片描述

一开始的时候,我建立了三个按钮,当点击其中一个按钮的时候,该按钮会向右增长出来一条长450px的红色长条,如点击按钮1,会向右出来一条红色450px的条状柱体,点击"缩短"按钮，该条状体消失;点击整长按钮1时出来了红色柱状体,当点击整长按钮2或3时,按钮2或3右边会出现相关的红色柱状体,整长按钮1的红色柱状体消失.
演示效果二如下:
图片描述

当点击下面的按钮时,下面按钮出现柱状体,上面按钮的柱状体消失,
图片描述

我的demo代码如下：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>JavaScript获取客户端IP[利用新浪接口]_www.jbxue.com</title>
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/measure.css">
    <script src="./js/vue.js"></script>
    <script src="./js/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            var App=new Vue({
                el:'#App',
                data:{
                    aaa:[
                        {
                            "id":"1"
                        },
                        {
                            "id":"2"
                        },
                        {
                            "id":"3"
                        }
                    ]
                },
                methods:{

                }


            });
            $("#App").on("click",".box ul li button",function () {
                $(this).parent("li").siblings("li").animate({width:"80px"},500);
                $(this).parent("li").animate({width:"450px"},500);
            });
            $("#App").on("click",".box ul li input",function () {
                $(this).parent("li").animate({width:"80px"},500);
            });
        })
    </script>
    <style>
        .box ul li{
            width: 80px;
            height: 40px;
            background-color: red;
            overflow: hidden;
        }
        .box ul li button{
            width: 80px;
            height: 40px;
        }
        .box ul li input{
            width: 80px;
            height: 40px;
            float: right;
        }
    </style>
</head>
<body>
<div>
    <div id="App">
        <div class="box">
            <ul>
                <li v-for="(item,index) in aaa">
                    <button>增长</button>
                    <input type="button" value="缩短">
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

因为上面代码设计到vue.js和jquery，需单独引入上面两个js文件,各位请问下上面的动画效果如果用vue来做,该怎么实现。

vue.js css3动画 javascript

阅读 10.5k

4 个回答

得票最新

spencerht

7.8k2728

发布于
2017-09-07

泻药，用css3的transition+vue点击事件绑定class就可以了
https://jsfiddle.net/k70b9wct/

squirrel

473

发布于
2017-09-08

数据驱动那就切换class，用css3动画性能还是不错的

跟选项卡一样的原理！很简单的，代码我就打上注释，看了就明白了。我也附上我写的一篇文章，里面就有vue简单的三个小实例vue快速入门的三个小实例。希望能对你有帮助

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>JavaScript获取客户端IP[利用新浪接口]_www.jbxue.com</title>
    <style>
        .box ul li{
            width: 80px;
            height: 40px;
            background-color: red;
            overflow: hidden;
        }
        .box ul .long{
            width: 400px;
        }
        .box ul li button{
            width: 80px;
            height: 40px;
        }
        .box ul li input{
            width: 80px;
            height: 40px;
            float: right;
        }
    </style>
</head>
<body>
<div>
    <div id="App">
        <div class="box">
            <ul>
                <!--判断now是不是item,如果等于，加上long类名，显示更长的长度（出现红色区域）-->
                <li v-for="(item,index) in aaa" :class="{'long':item===now}">
                    <!--设置now等于item-->
                    <button @click="now=item">增长</button>
                    <input type="button" value="缩短"  @click="now=''">
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
<!--vue文件自己引入-->
<script src="vue.min.js"></script>
<script>
        var App=new Vue({
            el:'#App',
            data:{
                now:'',
                aaa:[
                    {
                        "id":"1"
                    },
                    {
                        "id":"2"
                    },
                    {
                        "id":"3"
                    }
                ]
            },
            methods:{

            }


        });
</script>
</html>