代码之家 › 专栏 › 技术社区 › Razvan Zamfir

CSS转换:平滑设置视频宽度的动画失败

css html jquery javascript

Razvan Zamfir · 技术社区 · 7 年前

我用TwitterBootstrap4制作了一个水平的视频(和标题)传送带,它是 perfect-scrollbar plugin 还有一些自定义的CSS。

我的目标是使视频的宽度从0%变为100%,平滑过渡。我想制作宽度动画只有但是高度也会被设置为动画。到目前为止我写的代码:

if ($('#carousel').length > 0) {
    var ps = new PerfectScrollbar('#carousel', {
        useBothWheelAxes: true,
        maxScrollbarLength: 100
    });

    $('.video-box').each(function() {
        var vid = $(this).find('video');
        vid.closest('.video-container').addClass('loaded');
        vid.hover(function() {
            $(this).get(0).play();
        }, function() {
            $(this).get(0).pause();
        })
    });
}

.hero {
  height: 100vh;
  background: #111;
}
#carousel {
  display: flex;
  list-style-type: none;
  position: relative;
  min-width: 100vw;
  margin: 0;
  padding: 0;
  justify-content: left;
  align-items: center;
}
#carousel li {
  padding: 0;
	flex-shrink: 0;
	position: relative;
}
#carousel li a {
  text-decoration: none;
  color: #fff;
  display: block;
}
#carousel li .video-container video {
  transition: width 1s ease-in-out;
  width: 0;
  height: 100%;
}
#carousel li .video-container.loaded video {
  width: 100%;
}
#carousel li .caption {
  padding: 20px 20px 0 20px;
}
#carousel li h2 {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  margin: 0;
  padding: 0;
}
#carousel li p {
  font-size: 9px;
  padding: 0;
  margin: 5px 0 0 0;
}
#carousel .ps__rail-x {
  background: #5C5C5C;
  height: 3px;
  margin: 0 40% 10vh 40%;
}
#carousel .ps__thumb-x {
  height: 3px;
  margin-bottom: -2px;
  border-radius: 0;
  background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code-love.tk/demos/prop/lib/js/perfect-scrollbar.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="http://code-love.tk/demos/prop/lib/css/perfect-scrollbar.css" />
<div class="hero carousel-container d-flex">
  <ul id="carousel">
    <li class="video-box col-xs-12 col-sm-6 col-md-4">
      <a href="caz.html">
        <div class="video-container">
          <video src="//code-love.tk/video/commerciala.mp4" loop muted></video>
        </div>
        <div class="caption">
          <h2>Lorem ipsun dolor</h2>
          <p>A true story</p>
        </div>
      </a>
    </li>
    <li class="video-box col-xs-12 col-sm-6 col-md-4">
      <a href="#">
        <div class="video-container">
          <video src="//code-love.tk/video/commerciala.mp4" loop muted></video>
        </div>
        <div class="caption">
          <h2>Lorem</h2>
          <p>Lorem ipsum dolor sit</p>
        </div>
      </a>
    </li>
    <li class="video-box col-xs-12 col-sm-6 col-md-4">
      <a href="#">
        <div class="video-container">
          <video src="//code-love.tk/video/flamenco.mp4" loop muted></video>
        </div>
        <div class="caption">
          <h2>Lorem ipsum</h2>
          <p>Lorem ipsum dolor sit.</p>
        </div>
      </a>
    </li>
    <li class="video-box col-xs-12 col-sm-6 col-md-4">
      <a href="#">
        <video src="//code-love.tk/video/koffee.mp4" loop muted></video>
        <div class="caption">
          <h2>Into the wild</h2>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </div>
      </a>
    </li>
  </ul>
</div>

“Live”页面是 HERE .我做错什么了?我该怎么处理这些视频?

3 回复 | 直到 7 年前

Alisher Nasrullayev 7 年前

我想你应该包起来 <video src="//code-love.tk/video/koffee.mp4" loop muted></video> 具有 <div class="video-container"></div> 这样地:

<div class="video-container">
   <video src="//code-love.tk/video/koffee.mp4" loop muted>
</div>

if ($('#carousel').length > 0) {
    var ps = new PerfectScrollbar('#carousel', {
        useBothWheelAxes: true,
        maxScrollbarLength: 100
    });

    $('.video-box').each(function() {
        var vid = $(this).find('video');
        vid.closest('.video-container').addClass('loaded');
        vid.hover(function() {
            $(this).get(0).play();
        }, function() {
            $(this).get(0).pause();
        })
    });
}

.hero {
  height: 100vh;
  background: #111;
}
#carousel {
  display: flex;
  list-style-type: none;
  position: relative;
  min-width: 100vw;
  margin: 0;
  padding: 0;
  justify-content: left;
  align-items: center;
}
#carousel li {
  padding: 0;
	flex-shrink: 0;
	position: relative;
}
#carousel li a {
  text-decoration: none;
  color: #fff;
  display: block;
}
#carousel li .video-container video {
  transition: width 1s ease-in-out;
  width: 0;
  height: 100%;
}
#carousel li .video-container.loaded video {
  width: 100%;
}
#carousel li .caption {
  padding: 20px 20px 0 20px;
}
#carousel li h2 {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  margin: 0;
  padding: 0;
}
#carousel li p {
  font-size: 9px;
  padding: 0;
  margin: 5px 0 0 0;
}
#carousel .ps__rail-x {
  background: #5C5C5C;
  height: 3px;
  margin: 0 40% 10vh 40%;
}
#carousel .ps__thumb-x {
  height: 3px;
  margin-bottom: -2px;
  border-radius: 0;
  background: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code-love.tk/demos/prop/lib/js/perfect-scrollbar.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="http://code-love.tk/demos/prop/lib/css/perfect-scrollbar.css" />
<div class="hero carousel-container d-flex">
  <ul id="carousel">
    <li class="video-box col-xs-12 col-sm-6 col-md-4">
      <a href="caz.html">
        <div class="video-container">
          <video src="//code-love.tk/video/commerciala.mp4" loop muted></video>
        </div>
        <div class="caption">
          <h2>Lorem ipsun dolor</h2>
          <p>A true story</p>
        </div>
      </a>
    </li>
    <li class="video-box col-xs-12 col-sm-6 col-md-4">
      <a href="#">
        <div class="video-container">
          <video src="//code-love.tk/video/commerciala.mp4" loop muted></video>
        </div>
        <div class="caption">
          <h2>Lorem</h2>
          <p>Lorem ipsum dolor sit</p>
        </div>
      </a>
    </li>
    <li class="video-box col-xs-12 col-sm-6 col-md-4">
      <a href="#">
        <div class="video-container">
          <video src="//code-love.tk/video/flamenco.mp4" loop muted></video>
        </div>
        <div class="caption">
          <h2>Lorem ipsum</h2>
          <p>Lorem ipsum dolor sit.</p>
        </div>
      </a>
    </li>
    <li class="video-box col-xs-12 col-sm-6 col-md-4">
      <a href="#">
      <div class="video-container">
        <video src="//code-love.tk/video/koffee.mp4" loop muted></video>
       </div>
        <div class="caption">
          <h2>Into the wild</h2>
          <p>Lorem ipsum dolor sit amet, consectetur</p>
        </div>
      </a>
    </li>
  </ul>
</div>

Jamie Burton 7 年前

您可以为此使用纯JS修复程序。比如:

var curWidth = $(this).width();
$(this).css('width', 'auto');
var autoWidth = $(this).width();

$(this).width(curWidth).animate({
    width: autoWidth
}, 500);

此代码段基本上将宽度从0设置为自动,将值保存到变量,并将宽度重置为0,然后再将动画设置回元素自动宽度。这是我通常去动画宽度或高度从0到自动。

加上这一点CSS:

.video-container video {
    width: 0;
}

Travis Fleenor 7 年前

声明高度并标记对视频本身都很重要。但这会扭曲视频的纵横比。不知道你为什么要对视频这样做,但我很确定这会奏效。

video {
   width: 100%; !important
   height: 100%; !important /* or whatever you want the height to be doesn't have to be 100% */
 }