2020-08-31 Vue的过渡与动画

transition

过渡状态

使用transition组件（标签）包裹，需要切换的组件、元素

案例：
.ani1-enter{
  // 在这里定义初始状态
  opacity:0;
  transtion:translateX(-400px) rotate(360deg);
}
.ani1-enter-active,.ani1-leave-active{
  transtion:all 1s;
}
.ani1-leave-to{
  // 在这里定义最后 的一个状态
  opacity:0;
  transtion:translateY(400px) scale(0.1);
}

<transition name="ani1" mode="out-in">
  <div v-show="isShow">
  
  </div>
</transition>
{
  data:{
    isShow:false
  }
}

注意点:

1. transition 只能控制单个组件动画
1. 使用 v-if v-else-if v-else 多个平行可以控制（单个元素同时只显示一个）
1. mode 使用v-if v-else 控制多个元素动画（单个动画）
  out-in 先出去再进来(较为常见)
  in-out 先进来再出去

transition组件结合animation属性

1. 下载animate.css动画库
1. 可以利用swiper里的动画库

案例：
<link rel="stylesheet" href="./css/animate.css">
  <style>
    .box {
      width: 100px;
      height: 100px;
      color: cadetblue;
      font-size: 30px;
      margin: 50px auto;
    }
    .dong-enter-active {
      animation: 2s rotateInDownLeft;
    }
    .dong-leave-active {
      animation: 2s rotateOutDownLeft;
    }
  </style>
</head>
<body>
  <div id="app">
    <button @click='ischange = !ischange'>{{ ischange?'隐藏':'显示' }}</button>
    <transition name='dong'>
      <div class="box" v-show="ischange">
        ANIMATE.LESS
      </div>
    </transition>
  </div>
</body>
<script src="./js/vue.js"></script>
<script>
  let vm = new Vue({
    el:'#app',
    data:{
      ischange:false
    }
  })
</script>

transition-group组件主要用于加载列表动画

todolist的案例可以参考,拿transition-group组件包裹动态生成的列表项即可

//定义自定义过渡动画
<style>
.ani-enter {
      opacity: 0;
      transform: translateX(-300px) rotate(360deg);
    }

    .ani-enter-active,
    .ani-leave-active {
      transition: all 1s;
    }

    .ani-leave-to {
      opacity: 0;
      transform: translateY(300px) scale(0.1);
    }
</style>

//将之前的动态生成的列表项放在transition-group标签中即可
<ul class="list-group">
        <h2>未完成事项</h2>
        <li class="list-group-item" v-show="!todoList.length">
          暂无待办事项
        </li>
        <transition-group name='ani'>
          <li :class="['list-group-item','bg-danger']" :key="index" v-for="(cont,index) in todoList"
            v-if="cont.isCompleted===false">
            <span>{{ cont.cont }}</span>
            <button @click='addComplete(index)' class="btn btn-success btn-sm">完成</button>
            <button @click="del(index)" class="btn btn-danger btn-sm">删除</button>
          </li>
        </transition-group>
      </ul>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

2020-08-31 Vue的过渡与动画

transition

transition组件结合animation属性

transition-group组件 主要用于加载列表动画

友情链接更多精彩内容

transition-group组件主要用于加载列表动画