vue メモ -- フォームの次へボタンで次のフォームが出る感じにする

パネルで次へボタンを押したらフォーム部分だけが遷移する用な感じにする

VueJS 側

window.Vue = require('vue');
const registerVue = new Vue({
  el: '#registerForm',
  data: {
    docState: 1
  }

});

HTML 側

とかは省いて必要部分だけ。

<style>

.in-out-translate-demo-wrapper {
    position: relative;
    /*height: 18px;*/
}

.in-out-translate-fade-enter-active, .in-out-translate-fade-leave-active {
    transition: all .5s;
}

.in-out-translate-fade-enter, .in-out-translate-fade-leave-active {
    opacity: 0;
}

.in-out-translate-fade-enter {
    transform: translateX(31px);
}

.in-out-translate-fade-leave-active {
    transform: translateX(-31px);
}

</style>

<form class="form-horizontal" method="POST" action="#">
    <div id="registerForm">
        <div class="in-out-translate-demo-wrapper">

            <transition name="in-out-translate-fade" mode="out-in">
                <div v-if="docState === 1" key="on">
                    <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                        <label for="email" class="col-md-4 control-label">E-Mail Address</label>
                        <div class="col-md-6">
                            <input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-6 col-md-offset-4">
                            <button type="button" class="btn btn-primary" @click="docState = 2">Next</button>
                        </div>
                    </div>
                </div>

                <div v-else-if="docState === 2" key="second">
                    <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                        <label for="password" class="col-md-4 control-label">Password</label>
                        <div class="col-md-6">
                            <input id="password" type="password" class="form-control" name="password" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password-confirm" class="col-md-4 control-label">Confirm Password</label>
                        <div class="col-md-6">
                            <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-6 col-md-offset-4">
                            <button type="button" class="btn btn-default" @click="docState = 1">Back</button>
                            <button type="submit" class="btn btn-primary">Register</button>
                        </div>
                    </div>
                </div>
            </transition>
        </div>
    </div>

</form>

参考

トランジションモード vuejs