使用 :class 对宽度进行顺风变换

Question

我有一个全屏视频，当您向下滚动时，视频会获得最大宽度。我想通过变换使这种过渡“顺利”。有人给点建议吗？

 <div :class="{'max-w-7xl mx-auto px-4 sm:px-6': !scrollAtTop}">
<div  :class="{'-mt-32': scrollAtTop}">
        <iframe src="https://player.vimeo.com/video/598778656?autoplay=0&mute=0" class="" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>

Answer 1

它需要一个状态来转移。例如，如果元素是全宽的，那么默认状态将是 max-w-full，并且默认状态还需要 transition-all 或包含 max-width 和 duration 类的自定义转换变体。

var element = document.getElementById("element")
var child = document.getElementById("child")

window.addEventListener("scroll", function() {
  if(this.pageYOffset > 0) {
    element.classList.remove("max-w-full");
    element.classList.add("max-w-xl");
    child.classList.add("-mt-32")
  } else {
    element.classList.remove("max-w-xl");
    element.classList.add("max-w-full");
    child.classList.remove("-mt-32")
  }
})

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>



<div id="element" class="max-w-full mx-auto px-4 sm:px-6 transition-all duration-300">
  <div id="child" class=" transition-all duration-300">
    <img src="https://via.placeholder.com/1920x1080" alt="" />
  </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 mt-20 space-y-4">
  <p>I'm baby meh roof party shaman bespoke ugh cloud bread air plant. Street art thundercats glossier tattooed master cleanse tilde. Portland banh mi slow-carb kickstarter, mixtape shabby chic cardigan pitchfork quinoa activated charcoal salvia raw denim. Umami listicle knausgaard, cardigan post-ironic craft beer hexagon intelligentsia affogato. Authentic paleo fanny pack mustache, taxidermy kombucha readymade.</p>
  <p>Echo park polaroid authentic 90's meggings jean shorts cloud bread. Humblebrag flexitarian pour-over, tacos godard poutine waistcoat tattooed +1 crucifix paleo la croix kitsch tofu venmo. Flexitarian marfa schlitz dreamcatcher sustainable neutra helvetica jianbing biodiesel. Flexitarian beard franzen activated charcoal godard hoodie.</p>
  <p>I'm baby meh roof party shaman bespoke ugh cloud bread air plant. Street art thundercats glossier tattooed master cleanse tilde. Portland banh mi slow-carb kickstarter, mixtape shabby chic cardigan pitchfork quinoa activated charcoal salvia raw denim. Umami listicle knausgaard, cardigan post-ironic craft beer hexagon intelligentsia affogato. Authentic paleo fanny pack mustache, taxidermy kombucha readymade.</p>
  <p>Echo park polaroid authentic 90's meggings jean shorts cloud bread. Humblebrag flexitarian pour-over, tacos godard poutine waistcoat tattooed +1 crucifix paleo la croix kitsch tofu venmo. Flexitarian marfa schlitz dreamcatcher sustainable neutra helvetica jianbing biodiesel. Flexitarian beard franzen activated charcoal godard hoodie.</p>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 mt-20 space-y-4">
  <p>I'm baby meh roof party shaman bespoke ugh cloud bread air plant. Street art thundercats glossier tattooed master cleanse tilde. Portland banh mi slow-carb kickstarter, mixtape shabby chic cardigan pitchfork quinoa activated charcoal salvia raw denim. Umami listicle knausgaard, cardigan post-ironic craft beer hexagon intelligentsia affogato. Authentic paleo fanny pack mustache, taxidermy kombucha readymade.</p>
  <p>Echo park polaroid authentic 90's meggings jean shorts cloud bread. Humblebrag flexitarian pour-over, tacos godard poutine waistcoat tattooed +1 crucifix paleo la croix kitsch tofu venmo. Flexitarian marfa schlitz dreamcatcher sustainable neutra helvetica jianbing biodiesel. Flexitarian beard franzen activated charcoal godard hoodie.</p>
  <p>I'm baby meh roof party shaman bespoke ugh cloud bread air plant. Street art thundercats glossier tattooed master cleanse tilde. Portland banh mi slow-carb kickstarter, mixtape shabby chic cardigan pitchfork quinoa activated charcoal salvia raw denim. Umami listicle knausgaard, cardigan post-ironic craft beer hexagon intelligentsia affogato. Authentic paleo fanny pack mustache, taxidermy kombucha readymade.</p>
  <p>Echo park polaroid authentic 90's meggings jean shorts cloud bread. Humblebrag flexitarian pour-over, tacos godard poutine waistcoat tattooed +1 crucifix paleo la croix kitsch tofu venmo. Flexitarian marfa schlitz dreamcatcher sustainable neutra helvetica jianbing biodiesel. Flexitarian beard franzen activated charcoal godard hoodie.</p>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 mt-20 space-y-4">
  <p>I'm baby meh roof party shaman bespoke ugh cloud bread air plant. Street art thundercats glossier tattooed master cleanse tilde. Portland banh mi slow-carb kickstarter, mixtape shabby chic cardigan pitchfork quinoa activated charcoal salvia raw denim. Umami listicle knausgaard, cardigan post-ironic craft beer hexagon intelligentsia affogato. Authentic paleo fanny pack mustache, taxidermy kombucha readymade.</p>
  <p>Echo park polaroid authentic 90's meggings jean shorts cloud bread. Humblebrag flexitarian pour-over, tacos godard poutine waistcoat tattooed +1 crucifix paleo la croix kitsch tofu venmo. Flexitarian marfa schlitz dreamcatcher sustainable neutra helvetica jianbing biodiesel. Flexitarian beard franzen activated charcoal godard hoodie.</p>
  <p>I'm baby meh roof party shaman bespoke ugh cloud bread air plant. Street art thundercats glossier tattooed master cleanse tilde. Portland banh mi slow-carb kickstarter, mixtape shabby chic cardigan pitchfork quinoa activated charcoal salvia raw denim. Umami listicle knausgaard, cardigan post-ironic craft beer hexagon intelligentsia affogato. Authentic paleo fanny pack mustache, taxidermy kombucha readymade.</p>
  <p>Echo park polaroid authentic 90's meggings jean shorts cloud bread. Humblebrag flexitarian pour-over, tacos godard poutine waistcoat tattooed +1 crucifix paleo la croix kitsch tofu venmo. Flexitarian marfa schlitz dreamcatcher sustainable neutra helvetica jianbing biodiesel. Flexitarian beard franzen activated charcoal godard hoodie.</p>
</div>