相关疑难解决方法(0)

我有以下CSS:

.foo
{
    height:100px;
    overflow:hidden;
    -webkit-transition: height 200ms;
    -moz-transition: height 200ms;
    -o-transition: height 200ms;
    transition: height 200ms;
}

.foo.open
{
    height:auto;
}

当.foo有自动高度时,根据内容的不同,它的高度约为550px.

我open使用jQuery 添加类,我希望使用CSS3过渡在200ms内看到高度从100px变为~550px.

然而,究竟发生的是高度从100px变为0px,然后跳到~550px.

- 观看现场演示 -

如果我不是改.open到height:550px那么这个工作正常,但是内容的长度会有所不同,因此我需要将高度设置为自动,而不是一个固定的像素高度.

为什么div关闭而不是滑动到~550px,我该如何解决这个动画问题呢？

我有一个消息框,我想在点击时向下滑动.我通过Angular添加一个css类(在我的例子中使用jQuery)来实现这一点.但是我的CSS转换没有生效.

我在做什么明显的错误？

这是我的小提琴:http://jsfiddle.net/mBKXn/

和我的代码:

// jQuery
$('.test').on('click',function(){
  $('#msgContainer').toggleClass('msgShow');
});

// HTML
<div class="container">
    <div id="msgContainer" class="msg">
        <p>Message here</p>
        <p>T2</p>
        <p>T4</p>
    </div>
    Test text
</div>

<button class="test">Click</button>

// CSS
.container{
    position: relative;
    height: 200px;
    width: 400px;
    border: solid 1px #222;
}

.msg{
    position: absolute;
    top: 0;
    background-color: #FEEFB3;
    height: 0;
    width: 100%;
    overflow: hidden;
    -webkit-transition: height 0.8s linear;
    -moz-transition: height 0.8s linear;
    -o-transition: height 0.8s linear;
    -ms-transition: height 0.8s linear;
    transition: height 0.8s linear;    
}

.msgShow{
    height: auto; …

我有一个具有以下结构的标题：

 <header>
    <div class="container-fluid login-div">
        <div class="col-lg-1"></div>
        <div class="col-lg-10"></div>
        <div class="col-lg-1"></div>
    </div>
    <div class="container-fluid register-div">
        <div class="col-lg-1"></div>
        <div class="col-lg-10"></div>
        <div class="col-lg-1"></div>
    </div>
    <div class="container-fluid nav-header middle">
        <div class="col-lg-3"></div>
        <div class="col-lg-1 line-right"></div>
        <div class="col-lg-1"></div>
        <div class="col-lg-2 logo"><img src="images/logo.jpg" alt=" LOGO" id="img_logo"> </div>
        <div class="col-lg-1 line-right"></div>
        <div class="col-lg-1"></div>
        <div class="col-lg-3"></div>
    </div>
</header>

当页面加载时，login-div并被register-div隐藏。当用户单击某个按钮时，这些 div 的显示（好吧，取决于单击的按钮）。我遇到的问题是我无法让 div 显示所有内容。

我在这里创建了一个小提琴，所以你可以查看它。

现在就在每个人都告诉我设置高度之前，我不能，因为我不知道高度会是多少。根据用户选择的内容，内容的高度会发生变化。

我是React和Material UI的新手,所以请耐心等待:P

我想要做的是,有一张卡片随着内容的变化动态改变高度.根据文档,这应该自动发生,它确实发生,但我希望高度动画为新值.

所以这是相关的代码:

var SomeAwesomeComponent = React.createClass({

getInitialState: function(){
  return {
      text: 'Test'
  }
},

componentDidMount: function(){
  var self = this;
setInterval(function(){
    self.setState({
        text: 'Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello '
    })
  },2000)
},

render: function() {
    var cardStyle = {
        transition: '1s'
    }
    return (
        <div>
            <Card>
                <CardText transitionEnabled={true} style={{cardStyle}}>
                    {this.state.text}
                </CardText>
            </Card>
        </div>
    );
}

});

我能看到的是,高度会发生变化,但会跳到新值.我希望它"过渡"到新的价值.文档说这可以使用'transitionEnabled'完成,但我似乎无法让它工作.有人可以帮忙吗？

谢谢

我有一个 Vue 应用程序，其中的元素需要通过单击按钮来展开和折叠。需要对效果进行动画处理以使其不那么刺耳。我为此使用了标签，但除非我在 css 中对<transition>元素的属性进行硬编码，否则它不起作用。height这是行不通的，因为该元素包含动态数据并且具有不同的高度。

这是我的代码：

<template>
    <input type="button" value="Toggle" v-on:click="showIt = !showIt"/>
    <transition name="test-tran">
        <div class="test-block" v-show="showIt">
            <div v-for="item in items">{{ item }}</div>
        </div>
    </transition>
</template>

<script>
    export default {
        data() {
            return {
                showIt: false
            };
        }
    }
</script>

这是相应的CSS：

.test-block {
    /*
    adding a height makes the transition work but
    an accurate height can't be known ahead of time

    height: 100px;
    */
}

.test-tran-enter-active {
    transition: all .5s ease;
}

.test-tran-leave-active {
    transition: …

我有一个未知高度的 DIV，其内容可以从 javascript 事件中更改。当内容更改时，DIV 会调整大小以适应新内容。我想要做的是让 DIV 平滑地而不是突然地过渡到不同的高度。

我尝试将其添加到 DIV 的 CSS 中，但没有帮助。除非我设置了元素的特定高度。

transition: height 1s linear;

有没有一种简单的方法可以根据内容做到这一点？或者我别无选择，只能编写一个javascript函数并手动控制它。？

我正在 Angular（Dart 风格）中实现一个材质横幅组件，详细描述如下：https : //material.io/components/banners

除了这个行为部分，我几乎完全符合规范：https : //material.io/components/banners/#behavior

即：

屏幕加载后出现的横幅应从布局顶部开始在屏幕上显示动画。如果横幅与内容处于同一高度，则会将内容向下推。

所以如果我理解正确的话，横幅应该是正常布局流程的一部分，应该在出现时设置动画和下推内容，并且在向下滚动页面时也应该是粘性的（到顶部）。我只是无法找到满足所有这些要求的 CSS 属性和/或 Javascript 补充代码的组合。

到目前为止我尝试过的：

banner {
  position: sticky;
  top: 0;
  transition: transform 0.3s ease;
  transform: translateY(-100%);

  &.show {
    transform: translateY(0);
  }
}

这满足了页面向下滚动时的粘性要求，横幅本身在出现和消失时具有动画效果，但是当不可见时，它会在布局中留下间隙。这是预期的，因为 CSS 转换不会影响正常流程（https://www.w3.org/TR/css-transforms-1/#transform-rendering）

如果我将sticky定位更改为绝对，它不会在流程中留下间隙，但它会充当叠加层，并且在缓入时不会下推内容。在这种情况下，我也失去了粘性功能（但这可以解决通过基于当前滚动值的元素的 Javascript 调整）。

我已经尝试了max-height为横幅属性设置动画的可怕技巧，如此处所建议的：https : //stackoverflow.com/a/8331169/405481 我也尝试将其与 translateY 动画结合使用，但没有任何摆弄导致平滑滚动，同时推拉下面的内容。

所以。有没有办法在 HTML/CSS/Javascript 域中实现上述行为？

我正在尝试使用 Tailwind 的任意值功能将 div 的最大高度从 0 设置为 100%，但它不起作用：

document.getElementById("toggle").addEventListener("click", () => {
  document.getElementById("txt").classList.toggle("max-h-full");
  document.getElementById("txt").classList.toggle("max-h-0");
});

<script src="https://cdn.tailwindcss.com"></script>
<button id="toggle" class="m-3 p-2 border hover:bg-slate-300">Toggle text</button>
<p id="txt" class="m-3 border overflow-hidden max-h-full transition-[max-height] ease-out">
  This is a text.<br>That can be collapsed.<br>Or expanded.<br>And so forth.<br>Et cetera.
</p>

它只是立即折叠和扩展，没有任何过渡max-height。

奇怪的是，我确实看到开发人员工具中设置了正确的属性：

transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
transition-property: max-height;
transition-duration: 150ms;

当然还有max-height.

我还需要设置或配置什么才能进行转换？

尝试使用CSS动画创建动画下拉菜单,没有任何JS.我以为我一直在吠叫正确的树,但看不到我出错的地方,这个简化的菜单项...

<div class="menu">Menu Item
    <ul>
        <li>Dropdown 1</li>
        <li>Dropdown 2</li>
        <li>Dropdown 3</li>
        <li>Dropdown 4</li>
        <li>Dropdown 5</li>
    </ul>
</div>

以下CSS;

.menu ul {
    height: 0px;
    overflow: hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.menu:hover ul {
    height: auto;
}

认为应该成功地导致向下滚动div,但它只是不断出现.有什么想法吗？干杯

所以我喜欢在元素改变高度时进行转换。它适用于 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 …