vue2 添加过度动画

最新推荐文章于 2023-11-22 17:03:30 发布

黄金钢铁侠

最新推荐文章于 2023-11-22 17:03:30 发布

阅读量174

点赞数

文章标签：前端 javascript java 动画

本文链接：https://blog.csdn.net/hope_lucky/article/details/126644606

版权

<template>
  <div>
    <button @click="add">显示</button>
    <button @click="remove">隐藏</button>
    <transition name="lists" >  //使用transitio  标签包裹住你想要实现动画的盒子  
    
      <span  class="list-item" v-show="flag==false">333</span>

    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag:false
    };
  },
  methods: {
  
    add: function() {
      this.flag=false
    },
    remove: function() {
      this.flag=true
    }
  }
};
</script>

<style>
.list-item {
  display: inline-block;
  margin-right: 10px;
  width: 300px;
  height: 200px;
  background-color: aqua;
}


.lists-enter {
  transform: translateX(-100px);
}
.lists-enter-active {
  transition: all 1.2s;
}
.lists-enter-to {
  transform: translateX(0px);
}
.lists-leave-active {
  transition: all 1.2s;
}
.lists-leave-to {
  transform: translateX(-480px);
}

</style>

如果看不懂我是说如果看不懂代码的可以按照我的代码傻瓜式cv(复制粘贴)到自己的demo上运行一下就明白了