Question

我正在使用CSS来滑动菜单。使用JS我只添加一个类来触发CSS动画。在桌面模式下，菜单存在于包含列表项的4列中。在移动模式下，菜单将崩溃，只保留标题。可以点击标题打开菜单。

我的菜单运行正常，但向下滑动的动画与向上滑动不同。滑动也较慢/开始较晚。我不明白为什么会这样，我想要向下滑动和向上滑动同样的效果。

请参阅我的JSfiddle：JSfiddle

HTML

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

@IBAction func selectImageFromPhotoLibrary(_ sender: Any) {

    let imagePickerController = UIImagePickerController()
    imagePickerController.sourceType = .photoLibrary
    imagePickerController.delegate = self
    present(imagePickerController, animated: true, completion: nil)


}



func imagePickerControllerDidCancel(_ picker: UIImagePickerController){
    dismiss(animated: true, completion:nil)
}


func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : AnyObject]) {

    let selectedImage = info[UIImagePickerControllerOriginalImage] as! UIImage
    imageviewtimetable.image = selectedImage

    dismiss(animated: true,completion:nil)
}



/*
// MARK: - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    // Get the new view controller using segue.destinationViewController.
    // Pass the selected object to the new view controller.
}
*/

SCSS

<div class="site-footer">
    <div class="row">
        <div class="col-25p">
            <span class="footer-heading">Heading 1</span>
            <div>
                <ul>
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                    <li><a href="#">Sub 3</a></li>
                    <li><a href="#">Sub 4</a></li>
                    <li><a href="#">Sub 5</a></li>
                </ul>
            </div>
        </div>
        <div class="col-25p">
            <span class="footer-heading">Heading 2</span>
            <div>
                <ul>
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                    <li><a href="#">Sub 3</a></li>
                    <li><a href="#">Sub 4</a></li>
                    <li><a href="#">Sub 5</a></li>
                </ul>
            </div>
        </div>
        <div class="col-25p">
            <span class="footer-heading">Heading 3</span>
            <div>
                <ul>
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                    <li><a href="#">Sub 3</a></li>
                    <li><a href="#">Sub 4</a></li>
                    <li><a href="#">Sub 5</a></li>
                </ul>
            </div>
        </div>
        <div class="col-25p">
            <span class="footer-heading">Heading 4</span>
            <div>
                <ul>
                    <li><a href="#">Sub 1</a></li>
                    <li><a href="#">Sub 2</a></li>
                    <li><a href="#">Sub 3</a></li>
                    <li><a href="#">Sub 4</a></li>
                    <li><a href="#">Sub 5</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

的JavaScript

.site-footer {
font-size: 1.3rem;

.footer-heading {
    display: block;
    color: black;
    font-weight: bold;
    font-size: 18px;
    padding-top: 4px;

    &:hover{
        cursor: pointer;

        @media (min-width: 768px){
            cursor: default;
        }
    }

    &::after {
        font-family: "FontAwesome";
        float: right;
        content: "\f078";
        transition-property: all;
        transition-duration: 0.5s;

        @media (min-width: 768px){
            content: "";
        }
    }

    &.open{
        &::after{
            transform: rotate(180deg);
        }

        & + div{
            max-height:500px;
            //transition:all 500ms ease;
            transition-property: all;
            transition-duration: 1s;
            transition-timing-function: cubic-bezier(0.17, 0.04, 0.03, 0.94);
        }
    }


    & + div {
        overflow-y: hidden;
        max-height: 0;
        transition-property: all;
        transition-duration: 1s;
        transition-timing-function: cubic-bezier(0.17, 0.04, 0.03, 0.94);

        @media (min-width: 768px){
            max-height: 500px;
        }
    }

}

ul {
    list-style: none;
    padding-left: 0px;

    li {
        padding-top: 4px;
        padding-bottom: 4px;

        a {
            color: black;
            text-decoration: none;

            &:hover {
                text-decoration: underline;

            }
        }
    }
}
}


.col-25p{
  @media (min-width: 768px){
    float:left;
    width: 25%;
  }
}

Answer 1

您正在设置max-height属性的动画。它从0px动画到500px并返回。但是，动画的div小于500px。

这就是关闭动画时延迟的原因。

我通常解决这个问题的方法是使用JavaScript在元素上设置max-height属性。

Answer 2

请在& + div

中设置

transition:all 500ms ease;
transition-duration: 1s;
transition-timing-function: cubic-bezier(0.17, 0.04, 0.03, 0.94);

请尝试此

.site-footer {
    font-size: 1.3rem;

    .footer-heading {
        display: block;
        color: black;
        font-weight: bold;
        font-size: 18px;
        padding-top: 4px;

        &:hover{
            cursor: pointer;

            @media (min-width: 768px){
                cursor: default;
            }
        }

        &::after {
            font-family: "FontAwesome";
            float: right;
            content: "\f078";
            transition:all 500ms ease;
            transition-duration: 1s;
            transition-timing-function: cubic-bezier(0.17, 0.04, 0.03, 0.94);

            @media (min-width: 768px){
                content: "";
            }
        }

        &.open{
            &::after{
                transform: rotate(180deg);
            }

            & + div{
               max-height:500px;
               transition:all 500ms ease;
               transition-property: all;
               transition-duration: 1s;
               transition-timing-function: cubic-bezier(0.17, 0.04, 0.03, 0.94);
            }
        }


        & + div {
            overflow-y: hidden;
            max-height: 0;
            transition-property: all 500ms ease;
            transition-duration: 0.3s;
            transition-timing-function: cubic-bezier(0.17, 0.04, 0.03, 0.94);

            @media (min-width: 768px){
                max-height: 500px;
            }
        }

    }

    ul {
        list-style: none;
        padding-left: 0px;

        li {
            padding-top: 4px;
            padding-bottom: 4px;

            a {
                color: black;
                text-decoration: none;

                &:hover {
                    text-decoration: underline;

                }
            }
        }
    }
}


.col-25p{
  @media (min-width: 768px){
    float:left;
    width: 25%;
  }
}

CSS过渡堆叠？

2 个答案: