קהילת תכנות

פורום קהילת אנשי המקצוע מתחום התכנות, והנדסת תוכנה.
הרשאת פתיחת נושאים הינה לחברי הקהילה בלבד.
מנהלת הפורום: פרוגיוזרית
להצטרפות לקהילת תכנות הקש כאן

מאמרים אחרונים באתר

קהילת מתכנתות

קבוצה סגורה לנשים שעוסקות בתיכנות
מנהלת הפורום: פרוגיוזרית
להצטרפות הקישי כאן
פרטי
שלום,
אשמח לעזרה.
יש לי div שמכיל כמה divs שה - position שלהם הוא אבסולוטי.
בתחילה הם מוצגים אחד על השני.
בלחיצה על הערימה ה- position הופך ל - relative (ע"י הוספת class ב- Typescript) והם נפתחים - מוצגים אחד ליד השני.
השאלה היא איך עושים את זה עם transition - שתהיה לפתיחה תנועה חלקה?
לפי מה שהבנתי - ל absolute בלתי אפשרי עם transition.
קישור ל- codepen.
קוד:
JavaScript:
function open()
{
  var div = document.getElementsByClassName('outer')[0];
  for(let i=0; i<div.childElementCount; i++)
    {
      div.children[i].classList.add('open');
    }
};

HTML:
<div id="out" class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>
CSS:
.outer
{
  transition: all 1s ease-in-out;
  display: flex;
}

.inner
{
   width: 100px;
   height: 100px;
   background-color: #588765;
   margin: 3px;
   position: absolute;
   border: 3px solid #030f10;
   cursor: pointer;
}

.inner:nth-child(2)
{
  transform: rotate(-13deg);
}

.inner:nth-child(3)
{
  transform: rotate(10deg);
}

.open
{
  position: relative;
}
תודה רבה על כל רעיון!
 תגובה אחרונה 
היי
אני מנסה לעשות ולידציה לאימות סיסמא עם mat-step של angular material.
בSTEP הראשון של הסיסמא יש אפשרות ללחוץ הבא אבל ב STEP השני לא נותן --משהו כנראה בפונקציית הוילדציה לא נכון..
מצרפת קודים אשמח לעזרה - תודה!!

זה ה HTML:
HTML:
<mat-step [stepControl]="thirdFormGroup" errorMessage="ערך סיסמא חסר/ לא תקין">
      <form [formGroup]="thirdFormGroup">
        <ng-template matStepLabel>סיסמא</ng-template>
        <mat-form-field appearance="fill">
          <mat-label>הכנס סיסמא</mat-label>
          <input matInput [type]="hide ? 'password' : 'text'" formControlName="thirdCtrl">
          <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
            <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
          </button>
        </mat-form-field>
      
        <div>
          <button mat-button matStepperPrevious>הקודם</button>
          <button mat-button matStepperNext (click) = "clickPassword1()">הבא</button>
        </div>
      </form>
    </mat-step>


    <mat-step [stepControl]="fourFormGroup" errorMessage="ערך סיסמא לא תואם">
      <form [formGroup]="fourFormGroup">
        <ng-template matStepLabel>חזור על הסיסמא</ng-template>
        <mat-form-field appearance="fill">
          <mat-label>הכנס סיסמא</mat-label>
          <input matInput [type]= "hide ? 'password' : 'text'" formControlName="fourCtrl">
          <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
            <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
          </button>
        </mat-form-field>
וזה ה JS:
JavaScript:
ngOnInit(): void {
    this.firstFormGroup = new FormGroup({'firstCtrl': new FormControl('', [Validators.required])
    });
    this.secondFormGroup =new FormGroup({'secondCtrl': new FormControl('', [Validators.required, Validators.pattern('[0-9]{9,9}')])
    });
    this.thirdFormGroup = new FormGroup({'thirdCtrl': new FormControl('',[Validators.required, Validators.pattern('[0-9]{6,10}')])
    });
    this.fourFormGroup = new FormGroup({'fourCtrl': new FormControl('', [Validators.required, Validators.pattern('[0-9]{6,10}'), this.passwordValidators.bind(this)])
    });
  }
  //Validators on the passwords.
  passwordValidators(password : FormControl): { [errorPassword: string]: boolean } {
    console.log("password",password)
    if (password.value != this.password1){
      // console.log("לא תואם")
      return { errorPassword: true }
    
    }
    // console.log("תואם")
    return { errorPassword: false };
  }

אולי מעניין אותך גם...

הצטרפות לניוזלטר

איזה כיף שהצטרפתם לניוזלטר שלנו!

מעכשיו, תהיו הראשונים לקבל את כל העדכונים, החדשות, ההפתעות בלעדיות, והתכנים הכי חמים שלנו בפרוג!

לוח מודעות

הפרק היומי

הפרק היומי! כל ערב פרק תהילים חדש. הצטרפו אלינו לקריאת תהילים משותפת!


תהילים פרק כה

אלְדָוִד אֵלֶיךָ יי נַפְשִׁי אֶשָּׂא:באֱלֹהַי בְּךָ בָטַחְתִּי אַל אֵבוֹשָׁה אַל יַעַלְצוּ אֹיְבַי לִי:גגַּם כָּל קוֶֹיךָ לֹא יֵבֹשׁוּ יֵבֹשׁוּ הַבּוֹגְדִים רֵיקָם:דדְּרָכֶיךָ יי הוֹדִיעֵנִי אֹרְחוֹתֶיךָ לַמְּדֵנִי:ההַדְרִיכֵנִי בַאֲמִתֶּךָ וְלַמְּדֵנִי כִּי אַתָּה אֱלֹהֵי יִשְׁעִי אוֹתְךָ קִוִּיתִי כָּל הַיּוֹם:וזְכֹר רַחֲמֶיךָ יי וַחֲסָדֶיךָ כִּי מֵעוֹלָם הֵמָּה:זחַטֹּאות נְעוּרַי וּפְשָׁעַי אַל תִּזְכֹּר כְּחַסְדְּךָ זְכָר לִי אַתָּה לְמַעַן טוּבְךָ יי:חטוֹב וְיָשָׁר יי עַל כֵּן יוֹרֶה חַטָּאִים בַּדָּרֶךְ:טיַדְרֵךְ עֲנָוִים בַּמִּשְׁפָּט וִילַמֵּד עֲנָוִים דַּרְכּוֹ:יכָּל אָרְחוֹת יי חֶסֶד וֶאֱמֶת לְנֹצְרֵי בְרִיתוֹ וְעֵדֹתָיו:יאלְמַעַן שִׁמְךָ יי וְסָלַחְתָּ לַעֲוֹנִי כִּי רַב הוּא:יבמִי זֶה הָאִישׁ יְרֵא יי יוֹרֶנּוּ בְּדֶרֶךְ יִבְחָר:יגנַפְשׁוֹ בְּטוֹב תָּלִין וְזַרְעוֹ יִירַשׁ אָרֶץ:ידסוֹד יי לִירֵאָיו וּבְרִיתוֹ לְהוֹדִיעָם:טועֵינַי תָּמִיד אֶל יי כִּי הוּא יוֹצִיא מֵרֶשֶׁת רַגְלָי:טזפְּנֵה אֵלַי וְחָנֵּנִי כִּי יָחִיד וְעָנִי אָנִי:יזצָרוֹת לְבָבִי הִרְחִיבוּ מִמְּצוּקוֹתַי הוֹצִיאֵנִי:יחרְאֵה עָנְיִי וַעֲמָלִי וְשָׂא לְכָל חַטֹּאותָי:יטרְאֵה אוֹיְבַי כִּי רָבּוּ וְשִׂנְאַת חָמָס שְׂנֵאוּנִי:כשָׁמְרָה נַפְשִׁי וְהַצִּילֵנִי אַל אֵבוֹשׁ כִּי חָסִיתִי בָךְ:כאתֹּם וָיֹשֶׁר יִצְּרוּנִי כִּי קִוִּיתִיךָ:כבפְּדֵה אֱלֹהִים אֶת יִשְׂרָאֵל מִכֹּל צָרוֹתָיו:
נקרא  2  פעמים
למעלה