添加 AOS JS 库后，我的自定义 CSS 过渡动画在悬停时不起作用

问题描述 投票：0回答：3

我是初学者。我正在尝试制作一个用于练习的网页。我添加了一个名为“AOS（滚动动画）”的js库。该库工作正常，但添加库后我的自定义 CSS 过渡动画无法工作。

跟踪：HTML 行：110（工作 Div），CSS 行：156（.work 选择器）

我的代码

AOS.init();
daisyjs(document.getElementById('daisy'), {
    dotColor: '#000',
    lineColor: '#000'
});
var typed = new Typed('.strings', {
    strings: [
        'Web Developer',
        'Front-End Developer',
        'Back-End Developer',
        'Programmer'
    ],
    loop: true,
    typeSpeed: 60,
    backSpeed: 20,
});
.container {
    width: 90%;
    max-width: 1080px;
    margin: auto;
    padding: 5rem 0;
    line-height: 1.5;
}
.sh {
    text-align: center;
    margin: 0 auto 3.5rem;
}
.sh-t {
    font-size: 45px;
}
.sh-st {
    margin-top: 0.8rem;
    font-size: 22px;
    font-weight: 500;
    color: #2c3e50;
}
.btn-g {
    color: black;
    background: gold;
    border: 2px solid gold;
    font-weight: bold;
    border-radius: 30px;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: all 0.5s ease;
}
.btn-g:hover {
    padding: 0.75rem 2.5rem;
}
.btn-b {
    color: white;
    background: #000;
    border: 2px solid #000;
    font-weight: bold;
    border-radius: 30px;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    transition: all 0.5s ease;
}
.btn-b:hover {
    padding: 0.75rem 2.5rem;
}
a {
    text-decoration: none;
}
i {
    font-size: 25px;
    transition: all 0.4s ease;
}
i:hover {
    color: gold;
}
.gold {
    color: gold;
}
.white {
    color: white;
}
.black {
    color: black;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    list-style: none;
}
html {
    scroll-behavior: smooth;
}
/* --------------- Header --------------- */
header {
    width: 100%;
    min-height: 100vh;
}
.cover {
    background-color: gold;
    height: 10rem;
}
.box {
    text-align: center;
    margin-top: -6.5rem;
    position: relative;
}
.box > img {
    width: 200px;
    border-radius: 50%;
    cursor: pointer;
    border: 5px solid gold;
}
.name {
    font-size: 60px;
    margin-bottom: 1rem;
}
.strings {
    color: gold;
}
.btn-box {
    margin: 5rem 0 3rem;
}
.icon-box {
    margin-bottom: 3rem;
}
.social-icon {
    margin: 0 5px;
    font-size: 20px;
    color: #000;
}
/* --------------- Experience --------------- */
#experience {
    background-color: #000;
    text-align: center;
    font-weight: bold;
    color: #fff;
}
.experience-1 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 3rem;
}
.experience-1 section {
    border: 3px solid gold;
    border-radius: 5px;
    padding: 1rem 0.5rem;
    transition: all 0.5s ease;
}
.experience-1 section:hover {
    background: gold;
    color: #000;
    padding: 0 0.7rem;
    cursor: pointer;
}
.experience-1 section h1 {
    color: gold;
    margin: 1rem 0 0.5rem 0;
}
.experience-1 section:hover > h1 {
    color: #000;
}
.experience-1 i {
    font-size: 50px;
    color: gold;
}
.experience-1 section:hover > i {
    color: #000;
}
/* --------------- Works --------------- */
#works {
    background: gold;
}
.work {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5rem;
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 3rem;
    transition: all 0.5s ease;
}
.work:hover {
    box-shadow: 0 0 20px black;
}
.work-info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.work-info h1 {
    font-size: 30px;
}
.work-image img {
    display: block;
    width: 100%;
    cursor: pointer;
}
/* --------------- Work With Me --------------- */
#wwm {
    background-color: #000;
}
.n-e {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 3rem;
}
.input-area {
    font-size: 18px;
    padding: 10px;
    background-color: #ecf0f1;
    border: transparent;
    outline: none;
    border-radius: 5px;
}
.textarea {
    display: block;
    width: 100%;
    margin: 2rem 0;
}
.submit-btn {
    color: black;
    font-size: 18px;
    font-weight: 500;
    background: gold;
    border: 2px solid gold;
    border-radius: 30px;
    padding: 0.7rem 3rem;
    cursor: pointer;
    display: block;
    margin: auto;
    transition: all 0.3s ease;
}
.submit-btn:hover {
    padding: 0.7rem 4rem;
}
.send-btn {
    font-size: 20px;
}
.send-btn:hover {
    color: inherit;
}
/* --------------- Footer --------------- */
footer {
    background-color: gold;
    padding: 3rem 0;
    color: #000;
    font-size: 18px;
    text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./images/dabananda-mita-portfolio-02-favicon.png">
    <!-- AOS -->
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css"/>
    <!-- FontAwesome Icon CDN -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
    <!-- Google font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
    <title>Dabananda Mitra | Web Developer</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/styles.css">
    <link rel="stylesheet" href="./css/responsive.css">
</head>
<body>
    <!-- --------------- Header --------------- -->
    <header>
        <div class="cover" id="daisy"></div>
        <div class="box">
            <img src="https://www.google.com/imgres?imgurl=https%3A%2F%2Fhtmlcolorcodes.com%2Fassets%2Fimages%2Fhtml-color-codes-color-palette-generators.jpg&imgrefurl=https%3A%2F%2Fhtmlcolorcodes.com%2F&tbnid=7WSDwltCxmjyjM&vet=12ahUKEwi8k9ryr7PxAhWDY30KHUTaBCkQMygGegUIARDdAQ..i&docid=8gxp2CxZ1O5iYM&w=1440&h=900&q=color&hl=en&client=firefox-b-d&ved=2ahUKEwi8k9ryr7PxAhWDY30KHUTaBCkQMygGegUIARDdAQ">
            <h1 class="name">Hi, I'm Dabananda Mitra</h1>
            <h1 class="sub-name">I'm a <span class="strings"></span></h1>
            <div class="btn-box">
                <a href="#" class="btn-g">DOWNLOAD CV</a>
            </div>
            <div class="icon-box">
                <a href="https://www.facebook.com/dabananda.mitra.98/" class="social-icon" target="_blank">
                    <i class="fab fa-facebook"></i>
                </a>
                <a href="https://twitter.com/dabanandamitra" class="social-icon" target="_blank">
                    <i class="fab fa-twitter"></i>
                </a>
                <a href="https://www.instagram.com/dabananda.mitra/" class="social-icon" target="_blank">
                    <i class="fab fa-instagram"></i>
                </a>
                <a href="https://www.linkedin.com/in/dabananda-mitra-001a901b0/" class="social-icon" target="_blank">
                    <i class="fab fa-linkedin"></i>
                </a>
                <!-- <a href="https://github.com/dabananda" class="social-icon">
                    <i class="fab fa-github"></i>
                </a> -->
            </div>
        </div>
    </header>
    <!-- --------------- My Experience --------------- -->
    <div id="experience" data-aos="fade-up" data-aos-duration="1000">
        <div class="container">
            <div class="sh">
                <h class="sh-t gold">My Experience</h>
                <p class="sh-st white">Specialist in need. Generalist at heart.</p>
            </div>
            <div class="experience-1">
                <section class="br">
                    <i class="fas fa-laptop-code"></i>
                    <h1>Front-end</h1>
                    <ul>
                        <li>HTML</li>
                        <li>CSS</li>
                        <li>JavaScript</li>
                        <li>Bootstrap</li>
                        <li>jQuery</li>
                        <li>React Js</li>
                    </ul>
                </section>
                <section class="br">
                    <i class="fas fa-server"></i>
                    <h1>Backend-end</h1>
                    <ul>
                        <li>Node Js</li>
                        <li>MONGODB</li>
                        <li>MySql</li>
                        <li>Flusk</li>
                        <li>DGango</li>
                        <li>Laravel</li>
                    </ul>
                </section>
                <section class="br">
                    <i class="fas fa-code"></i>
                    <h1>Programming</h1>
                    <ul>
                        <li>C</li>
                        <li>C++/Cpp</li>
                        <li>Java</li>
                        <li>Python</li>
                        <li>JavaScript</li>
                        <li>GO</li>
                    </ul>
                </section>
                <section class="br">
                    <i class="fas fa-cogs"></i>
                    <h1>Tools</h1>
                    <ul>
                        <li>Visual Studio Code</li>
                        <li>Git</li>
                        <li>PyCharm</li>
                        <li>CLion</li>
                        <li>IntellijIDEA</li>
                        <li>WebStorm</li>
                    </ul>
                </section>
            </div>
        </div>
    </div>
    <!-- --------------- Works --------------- -->
    <div id="works" data-aos="fade-up" data-aos-duration="1000">
        <div class="container">
            <div class="sh">
                <h1 class="sh-t">My Works</h1>
                <p class="sh-st ">Here are few of my former clients</p>
            </div>
            <div class="work" data-aos="fade-right" data-aos-duration="1000">
                <section class="work-info">
                    <h1>CURABITUR TECH</h1>
                    <p style="font-size: 18px; margin: 1rem 0 3rem 0;">Curabitur Tech is id eros nisl. Cras id bibendum dolor. Quisque ultrices posuere ante sit amet varius.</p>
                    <a href="#" class="btn-b">VISIT WEBSITE</a>
                </section>
                <section class="work-image"><img src="./images/works/one.jpg" alt=""></section>
            </div>
            <div class="work" data-aos="fade-left" data-aos-duration="1000">
                <section class="work-image"><img src="./images/works/two.jpg" alt=""></section>
                <section class="work-info">
                    <h1>CURABITUR TECH</h1>
                    <p style="font-size: 18px; margin: 1rem 0 3rem 0;">Curabitur Tech is id eros nisl. Cras id bibendum dolor. Quisque ultrices posuere ante sit amet varius.</p>
                    <a href="#" class="btn-b">VISIT WEBSITE</a>
                </section>
            </div>
            <div class="work" data-aos="fade-right" data-aos-duration="1000">
                <section class="work-info">
                    <h1>CURABITUR TECH</h1>
                    <p style="font-size: 18px; margin: 1rem 0 3rem 0;">Curabitur Tech is id eros nisl. Cras id bibendum dolor. Quisque ultrices posuere ante sit amet varius.</p>
                    <a href="#" class="btn-b">VISIT WEBSITE</a>
                </section>
                <section class="work-image"><img src="./images/works/three.jpg" alt=""></section>
            </div>
            <div class="work" data-aos="fade-left" data-aos-duration="1000">
                <section class="work-image"><img src="./images/works/four.jpg" alt=""></section>
                <section class="work-info">
                    <h1>CURABITUR TECH</h1>
                    <p style="font-size: 18px; margin: 1rem 0 3rem 0;">Curabitur Tech is id eros nisl. Cras id bibendum dolor. Quisque ultrices posuere ante sit amet varius.</p>
                    <a href="#" class="btn-b">VISIT WEBSITE</a>
                </section>
            </div>
            <div class="work" data-aos="fade-right" data-aos-duration="1000">
                <section class="work-info">
                    <h1>CURABITUR TECH</h1>
                    <p style="font-size: 18px; margin: 1rem 0 3rem 0;">Curabitur Tech is id eros nisl. Cras id bibendum dolor. Quisque ultrices posuere ante sit amet varius.</p>
                    <a href="#" class="btn-b">VISIT WEBSITE</a>
                </section>
                <section class="work-image"><img src="./images/works/five.jpg" alt=""></section>
            </div>
        </div>
    </div>
    <!-- --------------- Work-With-Me --------------- -->
    <section id="wwm" data-aos="fade-up" data-aos-duration="1000">
        <div class="container">
            <div class="sh">
                <h1 class="sh-t gold">Wanna work with me?</h1>
                <p class="sh-st white">I'm currently available for work.</p>
            </div>
            <form class="contact-form">
                <div class="n-e">
                    <input class="input-area" type="text" placeholder="Full Name" required>
                    <input class="input-area" type="email" placeholder="Email Address" required>
                </div>
                <textarea class="textarea input-area" rows="6" placeholder="Write your query here"></textarea>
                <button type="submit" class="submit-btn"><i class="fas fa-paper-plane send-btn"></i> SEND</button>
            </form>
        </div>
    </section>
    <!-- --------------- Footer --------------- -->
    <footer>
        <p>Copyright &copy; 2021 | <a href="https://www.facebook.com/dabananda.mitra.98/" class="black" target="_blank">Dabananda Mitra</a></p>
    </footer>
    <!-- --------------- Daisy --------------- -->
    <script src="https://cdn.jsdelivr.net/gh/warengonzaga/daisy.js/daisy.min.js"></script>
    <script src="./plugins/daisy.js"></script>
    <!-- --------------- Typed --------------- -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="./plugins/typed.js"></script>
    <!-- --------------- AOS --------------- -->
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script src="./plugins/aos.js"></script>
    <!-- --------------- Main Js --------------- -->
    <script src="./main.js"></script>
</body>
</html>

如何启用过渡，以便“AOS”动画和我添加的过渡都能正常工作？

javascript html jquery css
3个回答
3
投票

AOS 已经使用了转换。为了使其工作，我将引入带有工作类的附加标签。

<div data-aos="fade-right" data-aos-duration="1000">
<div class="work">
    <section class="work-info">
        <h1>CURABITUR TECH</h1>
        <p style="font-size: 18px; margin: 1rem 0 3rem 0;">Curabitur Tech is id eros nisl. Cras id bibendum dolor. Quisque ultrices posuere ante sit amet varius.</p>
        <a href="#" class="btn-b">VISIT WEBSITE</a>
    </section>
    <section class="work-image"><img src="./images/works/one.jpg" alt=""></section>
</div> 
</div>
0
投票

您将需要样式属性

只需将其添加到您的元素中： style="transition:your-transitions;"

示例

<div data-aos="fade-up" style="transition:0.7s;"></div>
0
投票

由于 AOS 库已经使用了过渡属性，我发现最好的解决方案是将您的元素包装到另一个 

span
或任何其他标签中，并在该特定标签上应用 AOS 动画，这样您就可以实现 aos 动画和自定义下面的动画也是示例代码，以便更好地理解。

         <div className="absolute top-1/2 translate-y-[-70%] left-14 flex flex-col items-start">
          <span data-aos="fade-right" data-aos-duration="200">
            <span className="mt-3 block rounded-full p-2 cursor-pointer text-xl hover:text-3xl transition-all duration-300 bg-[#1877F2]">
              <FaFacebookF className="text-white " />
            </span>
          </span>
          <span data-aos="fade-right" data-aos-duration="400">
            <span className="mt-3 block rounded-full p-2 cursor-pointer text-xl hover:text-3xl transition-all duration-300  bg-[#0A66C2]">
              <FaLinkedinIn className="text-white " />
            </span>
          </span>
          <span data-aos="fade-right" data-aos-duration="600">
            <span className="mt-3 block rounded-full p-2 cursor-pointer text-xl hover:text-3xl transition-all duration-300  bg-[#fff]">
              <FaGithub className="text-black " />
            </span>
          </span>
          <span data-aos="fade-right" data-aos-duration="800">
            <span className="mt-3 block rounded-full p-2 cursor-pointer text-xl hover:text-3xl transition-all duration-300  bg-[#1DA1F2]">
              <FaTwitter className="text-white" />
            </span>
          </span>
          <span data-aos="fade-right" data-aos-duration="1000">
            <span className="mt-3 block rounded-full p-2 cursor-pointer text-xl hover:text-3xl transition-all duration-300  bg-[#E4405F]">
              <FaInstagram className="text-white" />
            </span>
          </span>
        </div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.