異なるクラスでの CSS トリガートランジショントランジションについて_html/css

回复讨论(解决方案)

ホームページ

ウェブフロントエンド

htmlチュートリアル

異なるクラスでの CSS トリガートランジショントランジションについて_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 09:01 AM

通过点击一个类触发事件，使另一个类发生display从none到block从而产生height的变化。

在各个类下面添加transition：height 2s；都没有效果

要怎样设置才能使该变化有过渡效果。

回复讨论(解决方案)

设置高度

我的页面是用百分比设置的，能不能在不设置px的情况下使用呢

百分比也可以。比如height: 0%;到height: 100%;

我的height是auto；在下面设置transition没效果；

是那种点击出下拉栏的那种效果，有三层，所以高度变化有三层，点击事件使通过JS添加的。

所以我只有个变化的DIV，和none类{display：none}控制出现和消失

不知道要怎么做才能加过渡效果QAQ

听你的描述，貌似是出在display:none到block的问题吧，你过渡都没声明这个属性，怎么会有从无到有的效果（PS：过渡不支持这个属性）。所以你只要把display:none去掉就行了，让元素的高度变化就行

简单一点说就是我元素本身是display：block，然后通过js 增删none类{display：none}来达到下拉栏的效果；

但是过渡效果不知道如何才能添加进去，直接加transition：height 2s；没有效果

别用js去增删none类，改变高度就行。因为你加了这个所有没有效果。

一↓

    一.1
    一.2
    一.3

これで完了です。↓ で div をクリックすると、クラスを追加または削除できます。 ;
幅:100%;
オーバーフロー: 非表示;

遷移: 高さ 2s; > }

簡単に言うと、私の要素自体はdisplay: blockであり、jsを介してnoneクラス{display: none}を追加および削除しますドロップダウンバーの効果を実現します。

しかし、トランジション効果を追加する方法がわかりません。トランジション: height 2s を追加するだけでは効果がありません。

Don js を使用して none クラスを追加または削除するのではなく、高さを変更するだけです。これを追加しても効果がなくなるからです。

その後、すべてをやり直す必要があります

もう表示について心配するつもりはありませんが、.none {height:0%! important;} が機能しないのはなぜですか?最も高度なものが重要ではないでしょうか?

トランジション関数には制限があります。トランジション属性の開始値と終了値は数値である必要があります。また、明示的に固定値に設定する必要があります。 auto、none、block などの属性を使用してトランジションを行うことはできません。

トランジション関数には制限があります。トランジション属性の開始値と終了値は数値である必要があります。また、明示的に固定値に設定する必要があります。 auto、none、block などの属性を使用してトランジションを作成することはできません CSS を使用せずにスムーズなドロップダウン効果を作成することはできますか?

transition トランジション関数には制限があります。トランジション属性の開始値と終了値は両方とも数値でなければなりません。また、明示的に固定値に設定する必要があります。 auto、none、block などの属性を使用してトランジションを作成することはできません

それなら他に方法はありません ~ CSS を使用せずに滑らかなドロップダウン効果を作成できますか ~

これを見てください http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css

トランジション遷移関数には制限があります。トランジション属性の開始値と終了値は両方とも数値でなければなりません。また、明示的に固定値に設定する必要があります。 auto、none、block などの属性を使用してトランジションを作成することはできません
他に方法はありませんか? ~ CSS なしでスムーズなドロップダウン効果を作成できます ~

これを見てください

http:// stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css

ありがとう、いくつかの重要な高さを次のように変更しました。 max-height とtransition: max-height 2x; OK!

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。