Vue transition

by Max Sinev

HTML

<div id="app" ref="app"  style="height: 1000px">
    Scroll down
    <with-slot>
      <appear-transition slot="child" >
        <toolbar v-if="isShown" style="display:flex;justify-content:center;"></toolbar>
      </appear-transition>
    </with-slot>
  </div>

<script type="text/x-tempalte" id="withSlot">
	<div>
    <slot name="child"></slot>
  </div>
</script>

<script type="text/x-tempalte" id="appearTransition">
	<transition name="appear">
    <slot></slot>
  </transition>
</script>

<script type="text/x-tempalte" id="toolbar">
	<ul style="position: fixed; top: 10px; left: 10px">
    <li><button>1</button></li>
    <li><button>2</button></li>
    <li><button>3</button></li>
    <li><button>4</button></li>
  </ul>
</script>

CSS

.appear-enter-active, .appear-leave-active {
  transition: opacity .5s;
}
.appear-enter, .appear-leave-to /* .fade-leave-active до версии 2.1.8 */ {
  opacity: 0;
}

Vue

Vue.component('with-slot', {
	template: "#withSlot"
});

Vue.component('toolbar', {
	template: "#toolbar"
});

Vue.component('appear-transition', {
	template: "#appearTransition"
});

new Vue({
  el: "#app",
  data: {
  	isShown: false
  },
  created() {
  	window.addEventListener("scroll", this.scrollSpy);
  },
  methods: {
  	scrollSpy() {
    	console.log(document.documentElement.scrollTop);
    	this.isShown = document.documentElement.scrollTop > 100;
    }
  }
});