JavaScript30 Day 5(flex box)

作者: lijianliang | 来源:发表于2017-07-28 20:10 被阅读0次

这是我在github 上发现的一个原生js挑战项目,由于是js小白,希望通过这次的项目加深对js的理解

第五天的挑战是点击任意一张图片,图片展开,上端和下端显示出文字,再次点击,图片缩回,字消失

day5效果图

CSS部分(由于做完这些,我对flexbox 还不是特别的熟练,明天准备做一做阮一峰大神的flexbox实例)如有不足,下次改进

本次挑战主要难点在css部分的flexBox部分
布局的传统解决方案,基于盒状模型,依赖 display属性+ position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

  • Flex Container(Parent)
    • display:flex 将其设置为弹性盒子
    • justify-content: center;沿主轴的的对齐方式为中部
    • flex-direction: column;排列方式为纵向
  • Flex Item(children)
    flex属性是flex-grow(伸展值), flex-shrink(可接受的压缩值)flex-basis(元素默认的尺寸值)的简写,默认值为0 1 auto。后两个属性可选。
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex Panels</title>
  <link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
</head>
<body>
  <style>
    html {
      box-sizing: border-box;
      background:#ffc600;
      font-family:'helvetica neue';
      font-size: 20px;
      font-weight: 200;
    }
    body {
      margin: 0;
    }
    *, *:before, *:after {
      box-sizing: inherit;
    }

    .panels {
      min-height:100vh;
      overflow: hidden;
      display: flex;
    }

    .panel {
      background:#6B0F9C;
      box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
      color:white;
      text-align: center;
      align-items:center;
      /* Safari transitionend event.propertyName === flex */
      /* Chrome + FF transitionend event.propertyName === flex-grow */
      transition:
        font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        background 0.2s;
      font-size: 20px;
      background-size:cover;
      background-position:center;
      flex: 1;
      justify-content: center;
      display: flex;
      flex-direction: column;
    }


    .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
    .panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); }
    .panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
    .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
    .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }

    /* Flex Items */
    .panel > * {
      margin:0;
      width: 100%;
      transition:transform 0.5s;
      flex: 1 0 auto;
      display:flex;
      justify-content: center;
      align-items: center;
    }

    .panel > *:first-child { transform: translateY(-100%); }
    .panel.open-active > *:first-child { transform: translateY(0); }
    .panel > *:last-child { transform: translateY(100%); }
    .panel.open-active > *:last-child { transform: translateY(0); }

    .panel p {
      text-transform: uppercase;
      font-family: 'Amatic SC', cursive;
      text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
      font-size: 2em;
    }
    .panel p:nth-child(2) {
      font-size: 4em;
    }

    .panel.open {
      flex: 5;
      font-size:40px;
    }

  </style>


  <div class="panels">
    <div class="panel panel1">
      <p>Hey</p>
      <p>Let's</p>
      <p>Dance</p>
    </div>
    <div class="panel panel2">
      <p>Give</p>
      <p>Take</p>
      <p>Receive</p>
    </div>
    <div class="panel panel3">
      <p>Experience</p>
      <p>It</p>
      <p>Today</p>
    </div>
    <div class="panel panel4">
      <p>Give</p>
      <p>All</p>
      <p>You can</p>
    </div>
    <div class="panel panel5">
      <p>Life</p>
      <p>In</p>
      <p>Motion</p>
    </div>
  </div>
</body>
</html>

JS 部分

  • 获取所有类名为 panel 的元素
  • 为其添加 click 事件监听,编写触发事件调用的函数
  • --为其添加 transitionend 事件监听,编写调用的函数
    const panels = document.querySelectorAll('.panel');

    function toggleOpen() {
      console.log('Hello');
      this.classList.toggle('open');
    }

    function toggleActive(e) {
    console.log(e);
      console.log(e.propertyName);
      if (e.propertyName.includes('flex')) {
        this.classList.toggle('open-active');
      }
    }

    panels.forEach(panel => panel.addEventListener('click', toggleOpen));
    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

这次js大部分内容都在以前的挑战中出现过,唯一出现的新知识点是toggle(),其为切换功能,也就是说如果存在这个类就移除,如果不存在就添加


以上就是我在day5中学到的知识,这里我同样参考了soyaine的中文指南,感谢

相关文章

  • JavaScript30 Day 5(flex box)

    这是我在github 上发现的一个原生js挑战项目,由于是js小白,希望通过这次的项目加深对js的理解 第五天的挑...

  • 简单的flex 布局

    .box{display: flex;}.box div{flex: 1;text-align: center;}...

  • css---flex兼容性布局

    flex布局教程 flex布局分为旧版本dispaly: box;,过渡版本dispaly: flex box;,...

  • 6Flex 布局

    Flex,(Flexible Box),意为"弹性布局"采用 Flex 布局的元素,为 Flex 容器(flex ...

  • Flex使用

    一:开启Flex布局: 1.普通容器: .box{display:flex;} 2.行内元素: .box{disp...

  • flex布局

    flex box属性 flex-direction【决定item排列方向】 flex-wrap【换行】 flex-...

  • Appending image dynamically

    Image container Using block-box cover flex-box: block-box...

  • Flex布局那些事儿

    Flex 是什么 Flex Box全称为Flexible Box,也即弹性布局,Flexbox布局比较适合Web应...

  • [翻译]Flex Basis与Width的区别

    最近在学习Flex Box,其中的Flex Box属性中的Flex Basis是关于项目宽度属性设置的,这让许多初...

  • 浏览器兼容直接用

    display: flex;display: -webkit-box;display: -webkit-flex;...

网友评论

    本文标题:JavaScript30 Day 5(flex box)

    本文链接:https://www.haomeiwen.com/subject/fzmflxtx.html