V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
js0816
V2EX  ›  Vue.js

Vue.js 中过渡效果的使用

  •  
  •   js0816 · 2016-10-21 18:16:05 +08:00 · 4100 次点击
    这是一个创建于 2955 天前的主题,其中的信息可能已经有所发展或是发生改变。

    问个小问题 我没查到 我写了个 demo 用 script 引入 vue.js 文件 然后使用 Vue 中的过渡效果,:transition="transitionName" 巴拉巴拉··· 可以实现过渡效果, 可是 我们项目 vuejs+webpack+vuex 的 我在项目中一个组件中用我 demo 中同样的过渡效果却不起作用 求教

    4 条回复    2016-10-22 17:58:44 +08:00
    w88975
        1
    w88975  
       2016-10-21 18:18:08 +08:00
    贴代码
    js0816
        2
    js0816  
    OP
       2016-10-21 18:27:15 +08:00
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/97/sqs1plm5/vue.min.js"></script>
    </head>

    <body>
    <div id="app">
    <div v-if="show" v-bind:transition="'expand'" class="active">hello</div>
    <button @click="showme">点击我</button>
    </div>
    </body>

    </html>
    <style>
    .active {

    height: 30px;
    padding: 10px;
    background-color: #eee;
    overflow: hidden;
    }

    /* 必需 */

    .expand-transition {
    transition: all .3s ease;
    }


    /* .expand-enter 定义进入的开始状态 */


    /* .expand-leave 定义离开的结束状态 */

    .expand-enter,
    .expand-leave {
    height: 0;
    padding: 0 10px;
    opacity: 0;
    }
    </style>
    <script>
    new Vue({
    el: '#app',
    data: {
    show: true,
    },
    methods: {
    showme: function() {
    if (this.show) {
    this.show = false;
    } else {
    this.show = true;
    }
    }
    },
    });
    </script>
    969054301
        3
    969054301  
       2016-10-22 15:23:39 +08:00
    vuejs 版本一样么?
    js0816
        4
    js0816  
    OP
       2016-10-22 17:58:44 +08:00 via iPhone
    @969054301 已经解决了 的确是 2.0 用法变了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2726 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 12:25 · PVG 20:25 · LAX 04:25 · JFK 07:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.