It is not working with v-if

MansurAliKoroglu commented 4 years ago

Hi I have a use case like described below:

On a drawer user clicks a link. Page smoothly moves to the section and drawer closes after the click.

To close the drawer (which is another animation) I use v-if. If the drawer is not active I just don't show it. However it is not working with this scenario. Is it a bug or or a missing feature?

<transition name="drawer-animation">
    <nav v-if="isDrawerActive" class="drawer-menu">
        <h1>Test</h1>
        <ul>
            <li><a href="#section-a" @click="toggleDrawer" v-smooth-scroll="{ updateHistory: false }">LinkA</a></li>
            <li><a href="#section-b" @click="toggleDrawer" v-smooth-scroll="{ updateHistory: false }">LinkB</a></li>
            <li><a href="#section-c" @click="toggleDrawer" v-smooth-scroll="{ updateHistory: false }">LinkC</a></li>
            <li><a href="#section-d" @click="toggleDrawer" v-smooth-scroll="{ updateHistory: false }">LinkD</a></li>
        </ul>
    </nav>
</transition>

Yuliang-Lee commented 4 years ago

The directive will be removed when the node is removed

MansurAliKoroglu commented 4 years ago

Yes that's what I was talking about. Isn't there a way to solve this problem?

Yuliang-Lee commented 4 years ago

Maybe just hide them but not remove from the dom tree. it's not this lib's problem so close this issue

Yuliang-Lee / vue2-smooth-scroll

It is not working with v-if #16