vuel中的transition标签，

最新推荐文章于 2024-05-23 19:22:50 发布

请你吃个冰激凌

最新推荐文章于 2024-05-23 19:22:50 发布

阅读量298

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45170083/article/details/105179972

版权

transition

对要使用动画的组件或者模块包上一层transition标签，
一般搭配v-if、v-show、动态组件、组件根节点来使用。

<div>
   <button @click="show = !show"></button>
   <transition name="fade">
      <div v-show="show" style="width: 100%;height: 5rem;background-color: #ff0000;position: fixed;bottom: 0;"></div>
   </transition>
</div>


<style>
   .fade-enter-active {
      transition: all 0.2s ease;
   }
   .fade-leave-active {
      transition: all 0.2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
   }
   .fade-enter, .fade-leave-to{
      transform: translateY(5rem);
      opacity: 0;
   }
</style>
<script>
var  app = new Vue({
    el:'#app',
    data: {
       show:true,
    }
});
</script>