vue_多个元素或组件的过渡动画

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style type="text/css">
    .v-enter,
    .v-leave-to {
      opacity: 0;
    }
    .v-enter-active,
    .v-leave-active {
      transition: opacity 1s
    }
  </style>
</head>
<body>
  <div id="app">
    <h3>多个元素/组件动画</h3>
    <!-- 点击切换的时候动画并不会生效，是因为vue会自动复用dom，添加key属性表示唯一元素就行 -->
    <!-- transition标签mode属性，mode="out-in"表示动画先出场在进场， mode='in-out'相反 -->
    <transition mode="out-in">
      <h2 v-if="show" key="hello">hello world</h2>
      <h2 v-else key="bye">bye world</h2>
    </transition>
    <button @click="handleClick">切换</button>
    <h3>组件过渡动画</h3>
    <transition mode="in-out">
      <component :is="type"></component>
    </transition>
  </div>
</body>
<script type="text/javascript">
  Vue.component('child',{
    template: `<div>child</div>`
  })
  Vue.component('child-one',{
    template: `<div>child-one</div>`
  })
  let vm = new Vue({
    el: '#app',
    data: {
      show: true,
      type: 'child'
    },
    methods: {
      handleClick () {
        this.show = !this.show
        this.type = this.type=="child"? 'child-one': 'child'
      }
    }
  })
</script>
</html>
复制代码

 

posted @   前端之旅  阅读(664)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示