食物food - mingliao/nuxt_elm GitHub Wiki

摘要

这个页面样式可以参考，好好写一下。 点击排序的时候，transition切换。

渲染图

知识点

  • 排序箭头反转
 <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg" version="1.1" class="sort_icon">
                <polygon points="0,3 10,3 5,8"/>
              </svg>

 .sort_icon {
      transition: all .3s; //动画效果
    }
 .choose_type{
    .sort_item_container{
      .sort_icon{
        transform: rotate(180deg); //对svg使用这个样式，不需要用多个svg替换。
        fill:$blue;
      }
    }
  }

排序面板的写法

复习一下transition的用法，

   <transition name="showlist" v-show="category">
            <section v-show="sortBy == 'food'" class="category_container sort_detail_type">
              .....
            </section>
          </transition>

  .showlist-enter-active, .showlist-leave-active {
    //中间状态。
    transition: all 10s;
    transform: translateY(0);
    /*background: #f00;*/
  }
  .showlist-enter, .showlist-leave-to {
    opacity: 0;
    transform: translateY(-100%);//最开始和最后的状态
  }

transition标签一般是为了做显隐某个元素过渡效果，

编写过渡的时候的步骤：

  1. 元素在它最后要显示的位置。 比如上面的示例，.category_container.sort_detail_type最后的位置在 只是隐藏而已。

可以f12 把这个类的display:none去除。就可以看到如上的显示效果了。

  1. 编写开始和最终的状态，以及中间状态。 最开始状态，透明度为0，向上偏移100%,
.showlist-enter, .showlist-leave-to {
    opacity: 0;
    transform: translateY(-100%);//最开始和最后的状态
  }

中间状态,设置过渡效果。

  .showlist-enter-active, .showlist-leave-active {
    //中间状态。
    transition: all 10s;
    transform: translateY(0);
    /*background: #f00;*/
  }

最终状态，如果有设置最终状态，就使用最终状态，然后再使用css自身的状态。否则，就使用元素自身的css样式状态了。

.showlist-enter-to {
   ....
}

可以参考示例codepen

当状态开始改变的时候,比如元素显示的时候，或者元素隐藏的时候。就按照这个顺序进行了。

状态变化如图 第一次制作动图，可能比较大，不给上传。 图链接

⚠️ **GitHub.com Fallback** ⚠️