v-if\v-show滑入滑出效果

Dyc_SE

于 2022-11-24 08:39:02 发布

阅读量695

点赞数 2

文章标签： css css3 html

本文链接：https://blog.csdn.net/Dyc_SE/article/details/128011002

版权

<transition name="plus-icon">
    	<view class="detail_container" v-show="detailShow"></view>//套住要显示隐藏的盒子
</transition>
//css样式
.plus-icon-enter-active {
        /* transition: all 0.5s;
         */
        animation: axisYin 1s;
    }
    .plus-icon-enter {
        /* opacity: 0; */
    }
    .plus-icon-leave-active {
        /* transition: opacity 0.5s;
         */
    }
    .plus-icon-leave-to {
        /* opacity: 0; */
        animation: axisYont 1s ;
    }
    
    @keyframes axisYin {
      from {
        transform: translateY(100%);
      }
      to {
        transform: translateY(0%);
      }
    }
    @keyframes axisYont {
      from {
        transform: translateY(0%);
      }
      to {
        transform: translateY(100%);
      }
    }