【问题标题】:Slide + fade effect using CSS transitions使用 CSS 过渡的滑动 + 淡入淡出效果
【发布时间】:2013-01-29 03:13:48
【问题描述】:

我正在尝试使用 CSS 效果或过渡来复制 this effect

Using animations 我可以为opacity 设置动画,但只能淡入,而height(应该控制幻灯片)似乎根本不起作用:(

我得到的最接近的是using javascript 在我想要动画的元素上设置一个临时类,并在其上应用初始不透明度。但是height 也不起作用。并且动画开始似乎有一点延迟。

还有其他想法吗?


所以我最终使用了 Simon 提到的问题中发布的解决方案:使用 javascript,我将要制作动画的元素包装在我应用动画的“包装器”DIV 中。每次单击标签时,包装器的高度都会从 0 更改为内容 DIV 的高度:

fiddle here

我知道它需要一些 javascript,但想法是用 CSS 制作动画,这就是它的作用。如果 JS 被禁用,切换仍然可以工作...

【问题讨论】:

    标签: javascript css css-transitions effects slidetoggle


    【解决方案1】:

    当涉及的高度之一是自动时,您目前无法在高度上设置动画,您必须设置两个明确的高度。作为对此similar question.的答案发布了一个广泛的解决方法

    【讨论】:

      【解决方案2】:

      我对你的 JS Fiddle 做了修改,我相信这就是你想要的; please see it here.

      原来需要在div上指定一个高度(0),别忘了overflow:hidden;这样内容就不会从 div 中“溢出”。但是,您仍然需要 jQuery / Javascript 来切换一个类,但这意味着需要更少的 Javascript。 (我切换了您将在小提琴上看到的“更改”类)

      input {
         display:none;
      }
      label {
          display:inline-block;
      }
      div {
          white-space: pre;
          background: #eee;
          color: #333;
          overflow:hidden;
          height:0;
          opacity:0;
          -moz-transition:height 1s opacity 1s;
          -webkit-transition:height 1s opacity 1s;
          -o-transition:height 1s opacity 1s;
          -ms-transition:height 1s opacity 1s;
          transition:height 1s, opacity 1s;
      }
      .changed {
          height:200px;
          opacity: 1;
      }
      

      我在过渡 CSS 属性中添加了一些供应商前缀,因为我不确定您将使用哪种浏览器,而且我使用的是 firefox,所以我需要 -moz- 前缀,哈哈 :)

      我能看到的唯一问题是 height:auto 或 height:100% 没有动画,所以你需要指定 ems 或 px...如果这将是一个问题(比如如果内容将是动态的),我建议使用 jQuery 进行高度动画。

      【讨论】:

      • 我可以确认这确实有效,你看过 JSFiddle 吗?还有你用的是什么浏览器?
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-10-01
      • 2011-08-05
      • 2020-08-24
      相关资源
      最近更新 更多