Also, die Menüs öffnen sich nun animiert, d.h. sie scrollen langsam von oben nach unten.
Jedoch ist da noch das "Ansichtenmenü". Die Untermenüs poppen nach wie vor einfach auf.
Werde noch einmal nach Horsmann's Anregung auf die Suche nach den richtigen Parametern der Selektoren gehen.
Beiträge von Mira_Belle
-
-
Sensationell, ich liebe diese Animationen. Wäre es noch möglich, die gleichen Animationen bei der Lesezeichen Symbolleiste hin zu bekommen ? Dann wäre es perfekt für mich.
Bestimmt, aber später. Verfolge einfach dieses Thema weiter.
-
Geht das Scrollen auch von links nach rechts?
Der Hintergrund dieser Frage war/ist das Ansichtenmenü!
Habe mich belesen und "translateY" muss einfach nur in "translateX" geändert werden.Aber wieder einmal will der Code (das CSS) nicht so, wie ich will!
Für "Symbolleisten" in "Ansicht".
CSS#viewToolbarsMenu menupopup { will-change: transform, opacity !important; opacity: 0 !important; transform: translateX(-100%) !important; } #viewToolbarsMenu[open] menupopup { opacity: 1 !important; transform: translateX(0) !important; transition: transform 1.5s ease, opacity 1.5s ease !important; }Aber funktioniert gar nicht! Nicht einmal "unsichtbar" wird das "Popup".
-
Du bist ein Orakel!
Hier der CSS-Code der wunderbar funktioniert.CSS
Alles anzeigen#file-menu menupopup { will-change: transform, opacity !important; opacity: 0 !important; transform: translateY(-100%) !important; } #file-menu[open] menupopup { opacity: 1 !important; transform: translateY(0) !important; transition: transform 1.5s ease, opacity 1.5s ease !important; } #edit-menu menupopup { will-change: transform, opacity !important; opacity: 0 !important; transform: translateY(-100%) !important; } #edit-menu[open] menupopup { opacity: 1 !important; transform: translateY(0) !important; transition: transform 1.5s ease, opacity 1.5s ease !important; } #view-menu menupopup { will-change: transform, opacity !important; opacity: 0 !important; transform: translateY(-100%) !important; } #view-menu[open] menupopup { opacity: 1 !important; transform: translateY(0) !important; transition: transform 1.5s ease, opacity 1.5s ease !important; } #history-menu menupopup { will-change: transform, opacity !important; opacity: 0 !important; transform: translateY(-100%) !important; } #history-menu[open] menupopup { opacity: 1 !important; transform: translateY(0) !important; transition: transform 1.5s ease, opacity 1.5s ease !important; } #bookmarksMenu menupopup { will-change: transform, opacity !important; opacity: 0 !important; transform: translateY(-100%) !important; } #bookmarksMenu[open] menupopup { opacity: 1 !important; transform: translateY(0) !important; transition: transform 1.5s ease, opacity 1.5s ease !important; } #tools-menu menupopup { will-change: transform, opacity !important; opacity: 0 !important; transform: translateY(-100%) !important; } #tools-menu[open] menupopup { opacity: 1 !important; transform: translateY(0) !important; transition: transform 1.5s ease, opacity 1.5s ease !important; } #helpMenu menupopup { will-change: transform, opacity !important; opacity: 0 !important; transform: translateY(-100%) !important; } #helpMenu[open] menupopup { opacity: 1 !important; transform: translateY(0) !important; transition: transform 1.5s ease, opacity 1.5s ease !important; }
Jipi, und mit ....CSS#AppMenuButton menupopup { will-change: transform, opacity !important; opacity: 0 !important; transform: translateY(-100%) !important; } #AppMenuButton[open] menupopup { opacity: 1 !important; transform: translateY(0) !important; transition: transform 1.5s ease, opacity 1.5s ease !important; }... geht es auch im Appmenü!
Mit den Werten für's scrollen (transform) werde ich noch etwas experimentieren.
Für die Transparenz (opacity) habe ich mich schon auf 0.3s festgelegt.Geht das Scrollen auch von links nach rechts?
-
@Horstmann Vielen Dank für Deine Anregung, aber da ist nichts!
-
Danke für die Rückmeldung.
Schön, dass es jetzt so funktioniert, wie von Dir gewünscht. -
Lesezeichen-Menü über das Lesezeichen-Icon , welches man sich erst in die Navbar schieben muss.
Ich habe es ausprobiert und es dürfte so ziemlich genau das sein, was du suchst. Für meinen Geschmack allerdings etwas zu viel Transparenz, aber sonst sieht es sehr gut aus
.Ich auch, und es ist ziemlich genau so, wie ich es mir vorstelle.
Der Code (das CSS) dazu:CSS
Alles anzeigen#BMB_bookmarksPopup { will-change: transform, opacity !important; opacity: 0 !important; transform: translateY(-100%) !important; } #BMB_bookmarksPopup[animate="open"] { opacity: 1 !important; transform: translateY(0) !important; transition: transform 1.5s ease, opacity 1.5s ease !important; }Das klappt wunderbar.
Adaptiere ich diesen Code (CSS) auf die Menüs der Menüleiste, funktioniert es nicht!
Zum Beispiel das Hilfemenü:
CSS
Alles anzeigen#menu_HelpPopup { will-change: transform, opacity !important; opacity: 0 !important; transform: translateY(-100%) !important; } #menu_HelpPopup[animate="open"] { opacity: 1 !important; transform: translateY(0) !important; transition: transform 1.5s ease, opacity 1.5s ease !important; }Das Menü erscheint erst gar nicht!
So ist es auch bei allen anderen Menüs. -
Ich weiss nicht was genau du vorhast, aber ....
Also, es gibt doch eine Menüleiste, darin die Einträge,
Datei, Bearbeiten, Ansicht, Chronik, Lesezeichen, "Profile", Extras und Hilfe.
Klickt man auf einen solchen "Eintrag" öffnet sich das Menü, und zwar pronto!
UND genau DAS will ich ändern!
Dieses Menü soll irgendwie sich langsam öffnen.
Ich dachte daran, dass es fein wäre, wenn sich diese Menüs ganz soft von oben nach unten "scrollen".
Und ja, auch "mein" Appmenü soll dahingehend angepasst werden, aber eins nach dem anderen. -
Ein letzter Versuch, der leider nur teilweise funktioniert!
JavaScript
Alles anzeigen// ==UserScript== // @name MenueAnimation // @description Menüeinträge sanft einblenden und heruntersliden in Firefox // @include main // @compatibility Firefox 140+ // ==/UserScript== (function () { const menuSelectors = [ '#AMpopup', '#menu_FilePopup', '#menu_EditPopup', '#menu_viewPopup', '#historyMenuPopup', '#bookmarksMenuPopup', '#menu_ToolsPopup', '#menu_HelpPopup' ]; function animateMenuItems(popup) { // Initialzustand beim Öffnen vorbereiten popup.addEventListener('popupshowing', () => { const items = popup.querySelectorAll('menuitem'); items.forEach(item => { item.style.opacity = '0'; item.style.transform = 'translateY(-8px)'; item.style.transition = 'opacity 250ms ease, transform 250ms ease'; }); }); // Bei Anzeige sanft einblenden und sliden popup.addEventListener('popupshown', () => { const items = popup.querySelectorAll('menuitem'); let delay = 0; items.forEach(item => { setTimeout(() => { item.style.opacity = '1'; item.style.transform = 'translateY(0)'; }, delay); delay += 30; // stufenweise Animation }); }); // Rücksetzen bei Schließen popup.addEventListener('popuphidden', () => { const items = popup.querySelectorAll('menuitem'); items.forEach(item => { item.style.transition = ''; item.style.opacity = ''; item.style.transform = ''; }); }); } function init() { menuSelectors.forEach(selector => { const popup = document.querySelector(selector); if (popup) { animateMenuItems(popup); } }); } if (document.readyState === 'complete') { init(); } else { window.addEventListener('load', init); } })();Ein sanftes Aufrollen der Menüs, einfach nur per CSS, bekomme ich einfach nicht hin.
Die Geschichte mit dem "Hovern" hat sich erst einmal erledigt!
Das sanfte Aufklappen, wie auch immer, ist mir wichtiger! -
Du hast wohl recht.
Werde Morgen das dann mal versuchen per CSS zu lösen.Danke. N8
-
Danke BrokenHeart , aber z.Z. beise ich mir erst einmal am smooten (soften) Aufklappen der Menüs
die Zähne aus.Hier ein Versuch, der, wie sollte es auch anders sein, nicht funktioniert!
JavaScript
Alles anzeigen// Warten, bis das Dokument vollständig geladen ist window.addEventListener('DOMContentLoaded', function() { // Funktion zum Hinzufügen von Übergängen zu den Menüs function addTransitions() { var menus = [ '#AMpopup', '#menu_FilePopup', '#menu_EditPopup', '#menu_viewPopup', '#historyMenuPopup', '#bookmarksMenuPopup', '#menu_ToolsPopup', '#menu_HelpPopup' ]; menus.forEach(function(selector) { var menu = document.querySelector(selector); if (menu) { menu.style.transition = 'opacity 2s ease-in-out, transform 2s ease-in-out'; menu.style.opacity = '0'; menu.style.transform = 'translateY(-10px)'; // Event-Listener hinzufügen, um den Übergang zu starten, wenn das Menü geöffnet wird menu.addEventListener('popupshowing', function() { this.style.opacity = '1'; this.style.transform = 'translateY(0)'; }); // Event-Listener hinzufügen, um den Übergang zurückzusetzen, wenn das Menü geschlossen wird menu.addEventListener('popuphiding', function() { this.style.opacity = '0'; this.style.transform = 'translateY(-10px)'; }); } }); } // Übergänge hinzufügen addTransitions(); }); -
Die Selektoren der Menüs:
Code#AMpopup #menu_FilePopup #menu_EditPopup #menu_viewPopup #historyMenuPopup #bookmarksMenuPopup #menu_ToolsPopup #menu_HelpPopup -
Die Überschrift ist nur die Kurzversion!
Also wenn man über die Einträge der Menüleiste streift, soll das Menü, wenn man auf einem Eintrag verweilt, nach einer gewissen Zeit sich von alleine öffnen.
Jetzt kommt Punkt zwei!
Das Menü soll sich soft von oben nach unten "ausrollen".Ich selbst bastele gerade am meinem Appmenü herum, aber es will nicht.
Habe versucht, irgendwie diesen Codefetzen da rein zu basteln.
JavaScript
Alles anzeigen// Funktion zum Animieren des Menüs function animateMenuOpening() { var menuPopup = document.getElementById('AMpopup'); menuPopup.style.opacity = '0'; menuPopup.style.transform = 'translateY(-10px)'; menuPopup.style.transition = 'opacity 0.3s ease, transform 0.3s ease'; setTimeout(() => { menuPopup.style.opacity = '1'; menuPopup.style.transform = 'translateY(0)'; }, 10); }Will aber nicht!
-
Ist seit gestern aktiviert, als Dharkness das erwähnte, deshalb habe ich das Script von Andreas bei meinem direkt wieder gelöscht, ist ja somit nicht nötig. Den Rest teste ich im Laufe des Abends oder morgen.
Und der Fehler tritt dennoch auf?
Dann bleibt Dir wirklich nur das austesten, welches Skript Dir da zwischen funkt. -
Irrungen und Wirrungen!
Ich habe die Sache mit dem Doppelklicken verwechselt!
Aber eine wichtige Frage!
Hast Du die Titelleiste aktiviert?
Mache doch bitte mal einen Screenshot. -
moonson Du nutzt das Skript aus Beitrag #2 ?
Stell es doch mal bei Seite, deaktiviere es, in dem Du einfach irgendetwas an die Endung hängst!
Teste dieses Skript.JavaScript
Alles anzeigen// 'Doubleclick on tab reloads tab' script for Firefox 126+ by Aris /* ***************************************************************************************************************** */ /* Github: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/tabstoolbar_doubleclickontab_reloadtab.uc.js */ /* ***************************************************************************************************************** */ var DoubleClickOnTabReloadTab = { init: function() { try { gBrowser.tabContainer.addEventListener("dblclick", function abcde(e) { if(e.button==0) { BrowserCommands.reload(); e.stopPropagation(); e.preventDefault(); } }, false); } catch(e) {} } } setTimeout(function() { DoubleClickOnTabReloadTab.init(); },500);Ich bin gespannt.
Wenn der Fehler weiterhin bei Dir auftritt, solltest Du alle Skripte mal deaktivieren, außer dem Skript für den "Doppelklick".
Nach und nach ein weiteres Skript wieder aktivieren und testen.
Wenn dann der Fehler wieder auftritt, hast Du das schuldige Skript gefunden.
Bitte um Rückmeldung so in Allgemeinen und auch was bei der Fehlersuche rauskommt. -
Mh, warum nicht?
Wie würdest denn Du das mit dem Farbverlauf machen?
Mir fiel nichts Besseres ein.
Ok, bei background-image: radial-gradient(circle, transparent 25%, #ddecab 85%) !important;kann man wohl das "circel" weg lassen!
Also background-image: radial-gradient(transparent 25%, #ddecab 85%) !important;
Bei der zweiten Frage stehe ich etwas auf dem Schlauch!
Diesen Code habe ich reingestellt, falls moonson der Farbverlauf an den "Enden" zu krass ist. -
@Horstmann Das Ding lässt Dir einfach keine Ruh', was?
Brauchst Du was Neues? Ich hätte da eventuell was!
(Ich habe einen Wunsch) -
background-image: radial-gradient(circle, transparent 25%, #ddecab 85%) !important;
oder
background-image: linear-gradient(#ddecab 1%, transparent 50%, #ddecab 99%) !important;
sollten am ehesten deinem "alten" Beispiel entsprechen.
Hier kannst Du erst einmal mit den Werten spielen, um zu sehen, was da so passiert!
-
Dieser Eintrag bewirkt, dass die Hintergrundfarbe des aktiven Tabs (in meinem Fall grün) nach innen hin zur Schrift transparent wird, sprich "verläuft".
Warum auch immer das bei Dir funktioniert, aber es ist falsch!
So sollte der passende Code aussehen: background-image: radial-gradient(circle, transparent 15%, #ddecab 75%) !important;
Du kannst dann über die %-Angaben sehr schön das Ergebnis "feintunen"!Noch eine Möglichkeit: background-image: linear-gradient(#ddecab 10%, transparent 50%, #ddecab 90%) !important;
