Study Notes JavaScprit30-5, javascprit30-5

Study Notes JavaScprit30-5, javascprit30-5

I 've been busy with this recently... I haven't watched the video for a long time, but I still want to learn it.

 

The effect of this operation is to use the flex feature to display a scalable image wall demo page ...:

 

The results are cool. So let's summarize what I don't know!

 

First, let's look at the CSS and HTML code:

Html:

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

Parent container: panels and five sub-containers panel.

Sub-containers have some introduction...

 

Css:

First, the code is initialized.

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

 

Then, the parent container is set:

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

The focus of learning is this flex... I know it myself, so I won't say much about it. Can see the bosses blog http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Then we set the sub-container!

    .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;      align-items: center;      display: flex;      flex-direction: column;    }

Justify-content is used to set or retrieve the alignment of an Elastic box element on the spindle (horizontal axis.
The align-items attribute defines the alignment of the flex subitem on the side axis (vertical axis) Direction of the current row of the flex container.
The flex-direction attribute specifies the direction of a flexible project. Column is vertical (it indicates that the content in the sub-container is vertical layout, and the sub-container is also configured with flex, so the words in the sub-container are vertical layout)

There is also an important animation effect!

Define your own values in the cubic-bezr function. The possible value is a value between 0 and 1.

For details, refer to this article.

Then there is a special CSS selector!

.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); }

 

If you do not want to select any Child element, but want to narrow down the scope and select only the Child element of an element, use the Child selector ).
For example, if you want to select only the strong element as the child element of the h1 element, you can write it as follows:
h1 > strong {color:red;}

Therefore, the above method is to write all the elements under the. panel.

He also used

. Panel> *: first-child
Select the first child element of its parent Element
(That is, the first p under. panel)

Then Javascript is used to operate this process!

Const panels = document. querySelectorAll ('. panel'); // find the son of the panel, but here it's just that nodelist is neither an array nor an object. Function togOpen () {this. classList. toggle ('open');} function togActive (e) {if (e. propertyName. except des ('flex ') {this. classList. toggle ('open-active');} panels. forEach (panel => panel. addEventListener ('click', togOpen); panels. forEach (panel => panel. addEventListener ('transitionend', togActive ));

 

The focus is

      function togOpen(){        this.classList.toggle('open');      }      function togActive(e){        if(e.propertyName.includes('flex')){          this.classList.toggle('open-active');        }      }

ClassList is used.

Toggle (Class,True | false)
Switch the class name in the element.

The first parameter is the name of the class to be removed from the element, and false is returned.
If the class name does not exist, the class name is added to the element and true is returned.

The second is an optional parameter, which is a Boolean value used to set whether the element is forcibly added or removed, regardless of whether the class name exists. For example:

Remove a class:Element. ClassList. toggle ("classToRemove", false );
Add a class:Element. ClassList. toggle ("classToAdd", true );

Note:Internet Explorer, Opera 12, and earlier versions do not support the second parameter.