Question

我试图在菜单和子菜单上设置淡出动画，但它只适用于第一个。我用的是 转换：所有0.3s缓解0;可见性：隐藏; margin-top：-10px; on nav＆gt; div＆gt; ul＆gt; li> ul和 margin-top：0px;不透明度：1;可见性：可见; ，悬停。问题来自nav li > ul ul {display: none;}。似乎CSS不能在display：none;之间制作动画。和显示：块;并且我不知道如何替换display：none;

这里是jsfiddle，显示：无，最后一个子菜单上没有动画，这里是jsfiddle，可见性：隐藏;动画有效，但我有线效果

有没有办法让这个动画在所有子菜单上运行？

Answer 1

试试这个，看起来你只有一个级别：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:ignore="MergeRootFrame" />

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textbox"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Hello World" />

</FrameLayout>

Answer 2

您可以将display属性与opacity结合使用，以获得相同的动画效果。即使display没有动画效果，但由于opacity的起点和终点正在设置动画，因此不会引起注意。

在您的情况下，看起来您需要做的就是添加另一个规则集，如下所示：

nav#site-navigation li > ul ul {
  display: none;
  opacity: 0;

  /* these will fix your jumping issue */
  position: absolute;
  left: 100%;
  top: 0;
}

nav#site-navigation li > ul ul {
  display: block;
  opacity: 1;
}

此外，您应该考虑仅设置transform属性的动画。当您为margin-top或宽度/高度等等设置动画时，会导致浏览器重新绘制/重排，从而影响性能。 transform动画是用GPU完成的。

CSS替代style =“display：none”

2 个答案: