vue transition过渡动画示例集合代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：vue transition过渡动画示例集合代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
.demo {
  border: 1px solid #d3dede;
  padding: 5px 10px;
  margin-bottom: 20px;
}


/** demo1 **/
.fade-enter-active,.fade-leave-active {
  transition: opacity .5s
}
.fade-enter,.fade-leave-active {
  opacity: 0
}


/** demo2 **/
/* Enter and leave animations can use different */
/* durations and timing functions.  */
.slide-fade-enter-active {
  transition: all .3s ease;
}

.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter,.slide-fade-leave-active {
  padding-left: 10px;
  opacity: 0;
}


/** demo3 **/
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-out .5s;
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bounce-out {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(0);
  }
}


/** demo9 **/
.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-active {
  opacity: 0;
}


/** demo10 **/
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-active {
  opacity: 0;
  transform: translateY(30px);
}


/** demo11 **/
.flip-list-move {
  transition: transform 1s;
}
</style>




</head>

<body translate="no" >
  <div id="demo1" class="demo">
  <h3>1.transition组件提供进入和移除动画</h3>
  <button v-on:click="show =! show">
    Toggle
  </button>
  
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>


<img src="//repo.bfw.wiki/bfwrepo/icon/60ecf359eb0c5.png" alt="" />

<div id="demo2" class="demo">
  <h3>2.transition 进入和移除动画</h3>
  <button @click="show =!show">
    Toggle render
  </button>
  
  <transition name="slide-fade">
    <p v-if="show">hello</p>
  </transition>
</div>

<div id="demo3" class="demo">
  <h3>3.CSS animations 方式相同</h3>
  
  <button @click="show = !show">
    Toggle show
  </button>
  
  <transition name="bounce">
    <p v-if="show">Look at me!</p>
  </transition>
</div>

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.3.5.1.css">
<div id="demo4" class="demo">
  <h3>4.transition 组件增加属性</h3>
  
  <button @click="show = !show">
    Toggle render
  </button>
  
  <transition
  name="custom-classes-transition"
  enter-active-class="animated tada"
  leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
</div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/velocity.min.js"></script>
<div id="demo5" class="demo">
  <h3>5.JavaScript hooks</h3>
  
  <button @click="show = !show">
    Toggle
  </button>
  
  <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false">
    <p v-if="show">
      Demo
    </p>
  </transition>
</div>

<div id="demo6" class="demo">
  <h3>6.节点的初始渲染应用转换</h3>
  <!-- 添加class -->
  <transition
    appear
    appear-class="custom-appear-class"
    appear-active-class="custom-appear-active-class">
  </transition>
  
  <!-- JavaScript钩子函数 -->
  <transition
    appear
    v-on:before-appear="customBeforeAppearHook"
    v-on:appear="customAppearHook"
    v-on:after-appear="customAfterAppearHook">
  </transition>
</div>


<div id="demo7" class="demo">
  <h3>7.在不同元素之间切换动画</h3>
  
  <transition>
    <table v-if="items.length > 0">
    </table>
    <p v-else>Sorry, no items found.</p>
  </transition>
  
  <!-- 注意：如果是相同元素，比如都是table，需要绑定key -->
  <transition>
    <button v-if="docState === 'saved'" key="saved">
      Edit
    </button>
    <button v-if="docState === 'edited'" key="edited">
      Save
    </button>
    <button v-if="docState === 'editing'" key="editing">
      Cancel
    </button>
  </transition>
  
  <!-- 等价于 -->
  <transition>
    <button v-bind:key="docState">
      {{ buttonMessage }}
    </button>
  </transition>
</div>


<div id="demo8" class="demo">
  <h3>8.Transition Modes</h3>
  
  <p>in-out: New element transitions in first, then when complete, the current element transitions out.</p>
  <p>out-in: Current element transitions out first, then when complete, the new element transitions in</p>
</div>


<div id="demo9" class="demo">
  <h3>9.Transitioning Between Components</h3>
  
  <input type="radio" v-model="view" value="v-a" name="view" />A
  <input type="radio" v-model="view" value="v-b" name="view" />B
  <transition name="component-fade" mode="out-in">
    <component v-bind:is="view"></component>
  </transition>
</div>


<div id="demo10" class="demo list-demo">
  <h3>10.transitioning entering and leaving</h3>
  
  <button v-on:click="add">Add</button>.........完整代码请登录后点击上方下载按钮下载查看