js0816
V2EX  ›  Vue.js

Vue.js 中过渡效果的使用

  •  
  •   js0816 · Oct 21, 2016 · 4734 views
    This topic created in 3496 days ago, the information mentioned may be changed or developed.

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

    4 replies    2016-10-22 17:58:44 +08:00
    w88975
        1
    w88975  
       Oct 21, 2016
    贴代码
    js0816
        2
    js0816  
    OP
       Oct 21, 2016
    <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  
       Oct 22, 2016
    vuejs 版本一样么?
    js0816
        4
    js0816  
    OP
       Oct 22, 2016 via iPhone
    @969054301 已经解决了 的确是 2.0 用法变了
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   964 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 20:00 · PVG 04:00 · LAX 13:00 · JFK 16:00
    ♥ Do have faith in what you're doing.