SOURCE

  <div class="root">
    <section v-for="el of arr">
      <figure>
        <img :src="el.src" alt="">
      </figure>
      <article>
        <h3>{{ el.h3 }}</h3>
        <p v-for="i in 20">{{el.p}}</p>
      </article>
    </section>

  </div>
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
  <script>
    "use strict";!function(e){"function"==typeof define&&define.amd?define(e):"undefined"!=typeof module&&module.exports?module.exports=e():window.enterView=e.call(this)}(function(){var e=function(e){function n(){g=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||function(e){return setTimeout(e,1e3/60)}}function t(){if(h&&"number"==typeof h){var e=Math.min(Math.max(0,h),1);return q-e*q}return q}function i(){var e=document.documentElement.clientHeight,n=window.innerHeight||0;q=Math.max(e,n)}function o(){y=!1;var e=t();A=A.filter(function(n){var t=n.getBoundingClientRect(),i=t.top,o=i<e;if(o&&!n.__enter_view){if(m(n),_)return!1}else!o&&n.__enter_view&&w&&w(n);return n.__enter_view=o,!0}),A.length||window.removeEventListener("scroll",r,!0)}function r(){y||(y=!0,g(o))}function u(){i(),o()}function f(e){for(var n=e.length,t=[],i=0;i<n;i+=1)t.push(e[i]);return t}function c(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return"string"==typeof e?f(n.querySelectorAll(e)):e instanceof NodeList?f(e):e instanceof Array?e:void 0}function d(){A=c(l)}function a(){window.addEventListener("resize",u,!0),window.addEventListener("scroll",r,!0),u()}function s(){var e=l&&m;e||console.error("must set selector and enter options"),n(),d(),a(),o()}var l=e.selector,m=e.enter,w=e.exit,v=e.offset,h=void 0===v?0:v,p=e.once,_=void 0!==p&&p,g=null,y=!1,A=[],q=0;s()};return e});

</script>
  <script>
    new Vue({
      data() {
        return {
          arr: [
            { src: 'https://i.loli.net/2018/09/05/5b8fce5fe2baa.gif', h3: '鸡腿', p: 'Mozilla/5.0 (Windows NT 5.0; WOW64; rv:10.3) Gecko/20100101 Firefox/10.3.9' },
            { src: 'https://i.loli.net/2018/09/05/5b8fce5fe2baa.gif', h3: '汉堡', p: 'Mozilla/5.0 (Windows NT 5.0; WOW64; rv:10.3) Gecko/20100101 Firefox/10.3.9' },
            { src: 'https://i.loli.net/2018/09/05/5b8fce5fe2baa.gif', h3: '薯条', p: 'Mozilla/5.0 (Windows NT 5.0; WOW64; rv:10.3) Gecko/20100101 Firefox/10.3.9' },
          ]
        }
      },
      mounted() {
        enterView({
          selector: 'figure > img',
          offset: 0.8,
          enter: function (el) {
            el.classList.add('entered');
          },
          exit: function(el) {
            el.classList.remove('entered');
          },
        });
      }
    }).$mount('.root')
  </script>

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-color: #fff;
  font-family: 'Courier New', Courier, monospace;
}

.roop {
  position: relative;
}

section {
  display: grid;
  grid-template-columns: 30% auto;
}

figure {
  text-align: center;
  background-color: #fffbe8;
  margin: 0;
}

figure>img {
  width: 200px;
  position: sticky;
  top: 25px;
  /* 必须设置 */
}

article {
  padding: 15px;
}

article>h3 {
  font-size: 2rem;
  margin-top: 0;
}

article>p {
  line-height: 2rem;
}

.entered {
  -webkit-animation: flip-2-ver-right-1 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: flip-2-ver-right-1 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}
/* ----------------------------------------------
 * Generated by Animista on 2018-9-11 0:10:19
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-2-ver-right-1
 * ----------------------------------------
 */
@-webkit-keyframes flip-2-ver-right-1 {
  0% {
    -webkit-transform: translateX(0) rotateY(0);
            transform: translateX(0) rotateY(0);
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
  }
  100% {
    -webkit-transform: translateX(100%) rotateY(-180deg);
            transform: translateX(100%) rotateY(-180deg);
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
  }
}
@keyframes flip-2-ver-right-1 {
  0% {
    -webkit-transform: translateX(0) rotateY(0);
            transform: translateX(0) rotateY(0);
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
  }
  100% {
    -webkit-transform: translateX(100%) rotateY(-180deg);
            transform: translateX(100%) rotateY(-180deg);
    -webkit-transform-origin: 0% 50%;
            transform-origin: 0% 50%;
  }
}