使用动画 SASS mixin 的问题

编程问答 2022-05-13

问题描述

嗨，我在应用和理解 css 中的动画时遇到了麻烦，我有一个带有 V 形图案的按钮可以打开一个 div，我希望 V 形图案在 div 打开时向下 90 度，并在它关闭时恢复正常.

当我试图编写一个干净的代码时，我将动画混合放入了我的混合 CSS following this article 并尝试为 <i> 中的 <span> 设置动画，但我完全无法弄清楚.

page.tpl

<span class="boutonSec" onclick="showSearch(this)">advanced search<i class="fa fa-chevron-right rotate"></i></span>
<script>
        function showSearch(elt)
        {
            $(elt).find("i").toggleClass("down");
            $(".advancedSearch").slidetoggle('slow');
        }
</script>

_mixins.scss

@mixin keyframes($animation-name) {
    @-webkit-keyframes #{$animation-name} {
        @content;
    }
    @-moz-keyframes #{$animation-name} {
        @content;
    }
    @-ms-keyframes #{$animation-name} {
        @content;
    }
    @-o-keyframes #{$animation-name} {
        @content;
    }
    @keyframes #{$animation-name} {
        @content;
    }
}

@mixin animation($str) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};
}

_annuaire.scss

@import "../../../../css/mixins";

@include keyframes(rotate) {
    from {transform:rotate(0deg);}
    to {transform:rotate(90deg);}
}

body{
    #searchPage{
        .searchFields{
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            .rotate{
            }
            .rotate.down{
                @include animation('rotate 0.6s linear');
            }
        }
...

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

animationanimationanimationjquerymixinsmixinssasssass