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

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

代码语言：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" clas.........完整代码请登录后点击上方下载按钮下载查看