Vue提供了transition的组件，在正常情况中，可以给任何元素和组件添加”进入”和”离开”过渡动画。
在使用v-if或者v-show的时候，想让效果好看一些，毕竟前端吗，要审美哈哈~
其实好多种实现方法，这里列出这一两种

1. 使用transition +css实现

点击按钮显示隐藏或者滚动显示隐藏

.fade-enter-active, .fade-leave-active {
      transition: opacity .5s
.fade-enter, .fade-leave-active {
      opacity: 0
这里还是挺简单的，效果可自行设置
 
2.利用 vue中的钩子函数实现动画
 
<div id="app">
    <button @click="toggle">显示/隐藏</button><br>        
     <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
         <div class="show"  v-show="isshow">itcast 传智</div>
     </transition>
<script>
         data(){             
             return{
             	isshow: false
         methods: {
             toggle: function () {
                 this.isshow = !this.isshow;
     // 以下三个与enter相关的方法只会在元素由隐藏变为显示的时候才会执行
     // el:指的是当前调用这个方法的元素对象
     // done:用来决定是否要执行后续的代码如果不执行这个方法，那么将来执行完before执行完enter以后动画就会停止  
             beforeEnter: function (el) {
                 console.log("beforeEnter");
                 // 当入场之前会执行 v-enter
                 el.style = "padding-left:100px";
             enter: function (el, done) {
                 // 当进行的过程中每执行 v-enter-active
                 console.log("enter");
                 // 为了能让代码正常进行，在设置了结束状态后必须调用一下这个元素的
                 // offsetHeight / offsetWeight  只是为了让动画执行
                 el.offsetHeight;
                 // 结束的状态最后啊写在enter中
                 el.style = "padding-left:0px";
                 // 执行done继续向下执行
                 done();
             afterEnter: function (el) {
                 // 当执行完毕以后会执行
                 console.log("afterEnter");
                 this.isshow = false;
  </script>
	   <style>
         .show {
             transition: all 0.5s;
     </style>
                    Vue提供了transition的组件，在正常情况中，可以给任何元素和组件添加”进入”和”离开”过渡动画。在使用v-if或者v-show的时候，想让效果好看一些，毕竟前端吗，要审美哈哈~其实好多种实现方法，这里列出这一两种1.使用transition +css实现&lt;div id="app"&gt;        &lt;input type="button" value="按钮" @click="toggle"&gt;        &lt;transition name="fade"&
 <div id=app>
  <transition name=direction mode=out-in> <!--动态获得transition 的name值-->
   <router class=app-view></router>
  </transition>
</template>
JS定义代码：定义在全局js文件里面
router.beforeEach((to, from, next) => {
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition name="hello" appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
</template>
<script>
	export
this.$nextTick(() => {
const el = document.querySelector('.act-not');
const offsetHeight = el.offsetHeight;
el.onscroll = () => {
const scrollTop = el.scrollTop;
const scrollHeight = el.scrollHeight;
if ((offsetHeight + scrollTop) - scrollHeight >= -1) {
// 需要执行的代码
坑：在做滚动加载分页时候，有时候第三
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.user(VueAwesomeSwiper)
import 'swiper/dist/css/swiper.css'
在组件中使用
<template>
  <label class=timeline>{{ tim
				
Vue通过条件渲染指令可以控制元素的显示和隐藏。常见的条件渲染指令有v-if、v-else-if和v-else。
在模板中，我们可以使用v-if指令来根据数据的真假值进行条件渲染，如果为true就渲染该元素，否则就不渲染。例如：
```html
<template>
    <p v-if="isShow">这是要显示的内容</p>
</template>
当isShow属性为true时，就会把`<p>`元素渲染出来，否则就不会显示。
v-else-if指令和v-else指令可以实现多个条件的选择渲染。例如：
```html
<template>
    <p v-if="isShow">这是要显示的内容</p>
    <p v-else-if="isShow2">这是第二个要显示的内容</p>
    <p v-else>这是要隐藏的内容</p>
</template>
当isShow属性为true时，就会把第一个`<p>`元素渲染出来；当isShow2属性为true时，就会把第二个`<p>`元素渲染出来；当前两个属性都为false时，就会把第三个`<p>`元素渲染出来。
此外，我们还可以使用v-show指令来实现元素的显示和隐藏。和v-if不同的是，v-show不是通过添加和删除DOM节点来实现的，而是通过修改CSS属性display的值来控制元素的显示和隐藏。例如：
```html
<template>
    <p v-show="isShow">这是要显示的内容</p>
</template>
当isShow属性为true时，就会把`<p>`元素显示出来；当isShow属性为false时，就会把`<p>`元素隐藏起来。需要注意的是，v-show指令不支持v-else-if和v-else指令。