Не работает аниманиция Vue JS

221

07 июня 2018, 15:40

Передаю опцию data в другой экземпляр, в Sidebar из Header Сначала работала плавная анимация Sidebar, после того как я стал передавать опцию в Sidebar, анимация перестала работать. В чем может быть проблема? Вот код

var Header = new Vue({ 
    el: '#header', 
    data: { 
        show: false 
    }, 
    methods: { 
        click: function() { 
            return this.show = !this.show; 
        } 
    } 
}) 
 
var Sidebar = new Vue({ 
    el: '#sidebar', 
    data: Header 
}) 
 
var MainContent = new Vue({ 
    el: '#main-content', 
    data: { 
        sections: [ 
            { 
                title: 'Filters' 
            } 
        ] 
    } 
})

* { 
    margin: 0; 
    padding: 0; 
} 
 
/* HEADER */ 
.header { 
    padding: 20px; 
    background: #ffffff; 
    box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.15); 
    line-height: 0; 
    position: relative; 
    z-index: 2; 
} 
 
/* MENU */ 
.menu__btn { 
    border: none; 
    background: transparent; 
    font-size: 32px; 
    line-height: 0; 
} 
 
/* SIDEBAR */ 
.sidebar { 
    z-index: 1; 
    position: absolute; 
    left: 0; 
    top: 72px; 
    height: 100%; 
    padding: 20px; 
    background: white; 
    width: 100%; 
    max-width: 320px; 
    box-shadow: 2px 4px 4px 1px rgba(0, 0, 0, 0.08); 
} 
 
.sidebar__item { 
    list-style: none; 
} 
 
.slide-enter-active, .slide-leave-active { 
    transition: all .5s; 
} 
.slide-enter, .slide-leave-to /* .fade-leave-active до версии 2.1.8 */ { 
    left: -100%; 
} 
 
/* MAIN CONTENT */ 
.main-content { 
    padding: 20px; 
    max-width: 1280px; 
    margin: 0 auto; 
} 
 
/* SECTIONS */ 
.sections { 
    font-size: 0; 
} 
 
.section-item { 
    width: calc(33.33% - 20px); 
    min-height: 350px; 
    display: inline-block; 
    margin: 0 10px; 
    font-size: 16px; 
    margin-bottom: 20px; 
    background: #ffffff; 
    box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.15); 
    box-sizing: border-box; 
    padding: 12px; 
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Vue JS First Lesson</title> 
    <link href="https://unpkg.com/ionicons@4.1.2/dist/css/ionicons.min.css" rel="stylesheet"> 
    <link rel="stylesheet" href="style.css"> 
</head> 
    <body> 
        <header class="header" id="header"> 
            <div class="menu"> 
                <button class="menu__btn" @click="click"><ion-icon name="menu"></ion-icon></button> 
            </div> 
        </header> 
 
        <transition name="slide"> 
            <aside class="sidebar" v-if="show" id="sidebar"> 
                <ul class="sidebar__items"> 
                    <li class="sidebar__item">Item 1</li> 
                    <li class="sidebar__item">Item 2</li> 
                    <li class="sidebar__item">Item 3</li> 
                    <li class="sidebar__item">Item 4</li> 
                    <li class="sidebar__item">Item 5</li> 
                </ul> 
            </aside> 
        </transition> 
 
        <main class="main-content" id="main-content"> 
            <section class="sections"> 
                <article class="section-item" v-for="section in sections"> 
                    <h2 class="section-item__title">{{section.title}}</h2> 
                </article> 
            </section> 
        </main> 
 
        <script src="https://unpkg.com/ionicons@4.1.2/dist/ionicons.js"></script> 
        <script src="https://cdn.jsdelivr.net/npm/vue"></script> 
        <script src="vue.js"></script> 
    </body> 
</html>