【记录】VUE transition标签的运用

最新推荐文章于 2024-07-02 16:56:38 发布

GEVAS

最新推荐文章于 2024-07-02 16:56:38 发布

阅读量3.2k

点赞数

分类专栏： vue 记录文章标签： vue html css JavaScript

本文链接：https://blog.csdn.net/qq_30068989/article/details/87860991

版权

记录同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

运用经历记录

<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>