相关疑难解决方法(0)

所以我喜欢在元素改变高度时进行转换。它适用于 h-10、h-20 等。但不适用于 h-min、h-max、h-auto。

<div id="botnav" className={`${isOpen ? 'h-min' : 'h-0'}\n                bg-primary\n                flex flex-col\n                transition-all duration-500 ease\n                \n        `}>\n            {\n                menu.map((item, index) => {\n                    return (\n                        <Link href={item.link} key={index} className="">\n                            <a className=" w-full px-1 py-1 text-white font-bold items-center justify-center border-none ">\n                                {item.name}\n                            </a>\n                        </Link>\n                    )\n                })\n            }\n\n        </div>\n

tailwind.config.js

module.exports = {\n  content: [\n    "./src/components/**/*.{js,ts,jsx,tsx}",\n    "./src/pages/**/*.{js,ts,jsx,tsx}",\n  ],\n  darkMode: false, // or 'media' or 'class'\n  theme: {\n    extend: {\n      colors: {\n        primary: {\n          DEFAULT: '#6558F5',\n        },\n        secondary: '#FED103',\n …

[我的问题与建议的重复问题不同，因为我的动画 div 中存在填充]

尝试让 div 展开，没有固定的高度和一些填充。我的 css 如下，我.closed使用 jquery 切换。

.slide {
  padding: 10%;
  background-color: gold;
  overflow-y: hidden;
  transition: height 2s;
  transition: max-height 2s;
  height: auto;
  max-height: 1000px;
}

.closed {
  height: 0;
  max-height: 0;
}

问题是，使用填充，您无法隐藏开始的文本，并且如果没有固定的高度，您将无法获得过渡的 css 更改。任何人都可以帮忙 - 希望我不需要用 javascript 做更多的事情吗？

更新我现在必须：

.slide {
  padding: 10%;
  background-color: gold;
  overflow-y: hidden;
  transition: max-height 2s ease;
  max-height: 500px;
}

.closed {
  max-height: 0;
  padding: 0;
  transition: all 2s ease;
}

参见plnkr。现在的问题是关闭时的填充。在上面的情况下，它会过渡出来，如果我将 .close 中的过渡限制为max-height那么就会出现不和谐的效果，因为它会在动画开始时崩溃。

我想使用角度动画制作动画。我的CSS规则是：

.expanded {
    transition: all ease 0.5s;
    overflow: hidden;
}
.expanded.ng-hide {
    height: 0px;
}

例如，如果我添加height: 100px到.expanded类中，则一切正常。但是如何使它在没有height定义的情况下起作用？我需要这个，因为.expanded容器的内容可能不同。

我正在尝试在react中使用样式组件创建一个简单的可折叠div。

我可以让div根据状态切换打开和关闭的状态，但似乎无法过渡到工作状态。它只是跳到打开或关闭。

样式化的组件：

const Details = styled.div`
    transition: 0.3s ease-out;

    &.open {
        height: auto;
        padding: 25px 0;
    }

    &.closed {
        height: 0;
        overflow: hidden;
    }
`;

JSX

<Details className={this.state.detailsOpen ? 'open' : 'closed'}>
    {stuff}
</Details>                

flex-basis是否有从auto其他值转换的技巧？据我所知，这是该规则的一个例外......这很烦人，因为它可以说是最有用的。

这是一个例子： http: //codepen.io/jamiewinder/pen/WrgrEB

单击“切换”按钮应使用过渡打开抽屉。不透明度起作用，但使用定义的高度flex-basis不起作用。如果我设置flex-basis为一定数量的像素、百分比或任何其他值，则它会起作用auto，这意味着我需要知道内容的高度才能使其正常工作。

我错过了什么吗？

假设我需要制作缩小图像的动画。此图像由我网站的用户设置，我不知道其分辨率。因此，页面上有一个随机图像，当访问者单击按钮时，它应该缩小图像。JavaScript/jQuery仅在我的示例中用于让您知道我的观点是什么，所以 CSS 方法就是我正在寻找的。在这段文字下，您可以看到我的代码示例。当您单击“切换”锚点时，它应该将图像放大。

$(function() {
  $('.toggle').click(function(e) {
    e.preventDefault();
    $('#test').toggleClass('active');
  });
});

#test {
  position: relative;
  width: 500px;
  height: 150px;
  overflow: hidden;
}
#test img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
  transition: all 5s;
}
#test.active img {
  width: auto;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  <img src="http://www.blueverticalstudio.com/wp-content/uploads/2011/05/1303508174-torre-europa-0180-500x1000.jpg" />
</div>
<a href="#" class="toggle">Toggle</a>

编辑：

由于这个问题收到了很多意见，我更新了我在接受的答案中指出的旧 jsFiddle 作为解决方案。它不好，您根本不应该使用它。您有 99% 的机会不需要那样使用它。

https://jsfiddle.net/gej1zb67/

我有一个 div，我想在其中显示一个人的名字。

我只想在正常状态下显示该人的名字。当您将鼠标悬停时，姓氏应出现在名字的右侧，其宽度从 0 扩展到正常宽度。所有这些文本都右对齐。

如果我将过渡应用于姓氏范围，它甚至不会显示。
我还尝试了 max-width （就像一个人在这里所做的那样： http: //jsfiddle.net/qP5fW/87/），但它不起作用。所以我做了一个包装 div，使用 width 而不是 max-width，现在它可以工作了，只是它根本不显示过渡。

我怀疑问题出在“auto”属性上，但如果有人知道如何进行转换，我将非常感激。

这是我的小提琴： https: //jsfiddle.net/drywrsy6/

HTML：

<div class="name">
  <span class="first">John</span>
  <div class="last-wrapper">
    <span class="last">Doe</span>
  </div>
</div>

CSS：

.name {
  border: 1px solid lightgrey;
  margin: 10px auto 0px auto;
  padding: 5px;
  width: 300px;
  font-size: 2em;
  text-align: right;
  overflow: hidden;
  white-space: nowrap;
}

.first {
  font-style: italic;
}

.last-wrapper {
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  width: 0;
  transition: all 1s;
}

.last {
  color: red;
} …

我正在尝试做一个相当简单的可折叠菜单转换。我的元素看起来像：

<transition name="settings">
    <div v-show="!settingsCollapsed">
    </div>
</transition>

我的 css 看起来像

.settings-enter {
  max-height: 0px;
}
.settings-enter-active {
  max-height: 200px;
  transition: all 1s;
}
.settings-leave {
  max-height: 200px;
}
.settings-leave-active {
  max-height: 0;
  transition: all 1s;
}

我的菜单正确向上滑动，但是当它向下滑动时它没有动画。在我看来，它.settings-enter从未被应用过，它只是从隐藏到上课.settings-enter-active。

任何建议如何解决这个问题，或者为可折叠菜单设置动画的替代方法？

我有一个模态（用 React 编写，但这并不重要）在里面，我想添加一个手风琴。我有手风琴很好地上下滑动，我的问题是模式的高度根据手风琴过渡立即上下跳跃。

有没有办法让模态高度在手风琴旁边的过渡中增长？谢谢

编辑：改写问题。

我猜这个例子是不言自明的，我不知道为什么 div 首先缩小，然后弹出到正确的高度。

这是示例代码

<div class="block">
  <div class="abs">
    hover me!!<br/>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet
  </div>
</div>

和 CSS

.block {
  position: relative;
  height: 500px;
  width: 500px;
}

.abs {
  position: absolute;
  height: 40px;
  width: …

如何将 css 过渡应用于初始宽度设置为的 div auto

但是，如果我将初始宽度设置为某个数字，例如 50px，过渡就会开始。

这是 -演示

.container {
  width: 200px;
  background: red;
  height: 50px;
}


.child1 {
  background: black;
  display: inline-block;

}

.child2 {
  background: blue;
    display: inline-block;
  width: auto;  /* this does not work */

    /* width: 50px; */ /* this works */
  float: right;
  -webkit-transition: width 2s;
      transition: width 2s;
}

.child2:hover {
  width: 100px;
}